图表库TeeChart for JavaScript/HTML5实用教程（六）

TeeChart for JavaScript/HTML5是基于HTML5画布的跨浏览器JavaScript图表库，本教程将会介绍如何使用TeeChart for Javascript库创建图表和图形。

    TeeChart for JavaScript/HTML5是一个100%的 JavaScript/ HTML5图表库，可以在所有兼容的浏览器中以原生的Javascript格式使用HTML5 Canvas绘制图表。 

TeeChart for JavaScript/HTML5最新试用版

导出图表

    要从图表中获取PNG或JPEG图像，可以使用canvas toDataURL方法或包含的toImage函数：

Chart1.toImage( “img” );   Chart1.toImage( “img” , “jpg”, 90 );

Chart1.toImage(img)：用图表填充

Chart1.toImage（img，jpg，90）：使用90％压缩的jpeg图像填充图像。

图表工具

    某些功能被实现为工具对象，可以将这些对象添加到图表工具数组属性中以激活它们。

注释

    可以使用注释工具在任何图表位置显示自定义文本：

Chart1.tools.add( new Tee.Annotation( Chart1, “Hello”, 50, 50 ) );

    注释对象具有格式，文本和位置属性。使用onclick事件时，注释也可以充当按钮：

var  b1=new Tee.Annotation(Chart1, “button 1”, 100, 100);b1.cursor="pointer";b1.onclick=function(button,x,y) { alert("Clicked button 1"); }Chart1.tools.add( b1 );

提示

    将鼠标移到系列数据点上时，此工具显示系列数据。

var  tip=new Tee.ToolTip(Chart1);tip.format.font.style="16px Tahoma";Chart1.tools.add(tip);

    ToolTip工具提供onshow，onhide和ongettext事件。

游标

    可拖动光标线实现为工具对象：

  var t=new Tee.CursorTool(Chart1);  t.format.stroke.size=2;  t.format.stroke.fill="#BB0000";  Chart1.tools.add(t);

    光标工具包括方向属性（将光标显示为水平线，垂直或两者）和拖动光标时触发的onchange事件。

拖动点

    DragTool实现鼠标/触摸点拖动。

  Chart1.tools.add(new Tee.DragTool(Chart1));

    包括改变和不变的事件，target属性确定拖动哪个系列和哪个系列点索引。

滑块

    通用滑块控件，可在图表内使用以更改任何值。

 var slider=new Tee.Slider(Chart1);  slider.min=1;  slider.max=100;  slider.position=10;  slider.thumbSize=12;  slider.horizontal=true;  slider.bounds.x=50;  slider.bounds.y=10;  slider.bounds.width=150;  slider.bounds.height=20;  slider.onChanging=function(slider,value) {    Chart1.title.format.font.style = value.toFixed(0) + “ Verdana”;    return value;  }  Chart1.tools.add(slider);

滚轮

    滚动工具显示另一个图表的简化视图，并允许滚动它。有关完整示例，请参阅此演示。

系列动画

    通过改变轴刻度或旋转变换执行的简单动画：

  var a=new Tee.SeriesAnimation(Chart1);  a.duration=500; // milliseconds  Chart1.tools.add(a);

    可以通过html按钮调用启动动画的animate方法：

    TeeChart for JavaScript/HTML5的教程到这里就结束了，希望这些教程对您有帮助，如果您还需要其他关于TeeChart产品的教程，可以点击图表控件公司Steema2019文章合集>>查看。

关注慧聚IT微信公众号 了解产品的最新动态及最新资讯。

标签：

来源：慧都