基于HTML5的图表库TeeChart for JavaScript/HTML5基础教程（六）

  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文章合集>>查看。