TeeChart for JavaScript/HTML5是一个100%的 JavaScript/ HTML5图表库,可以在所有兼容的浏览器中以原生的Javascript格式使用HTML5 Canvas绘制图表。
导出图表
要从图表中获取PNG或JPEG图像,可以使用canvas toDataURL方法或包含的toImage函数:
Chart1.toImage( “img” );
Chart1.toImage( “img” , “jpg”, 90 );
Chart1.toImage(img):用图表填充元素作为PNG图像。
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文章合集>>查看。