TeeChart for JavaScript/HTML5是一個100%的 JavaScript/ HTML5圖表庫，可以在所有兼容的瀏覽器中以原生的Javascript格式使用HTML5 Canvas繪制圖表。 

點擊下載TeeChart for JavaScript/HTML5最新試用版

導出圖表

    要從圖表中獲取PNG或JPEG圖像，可以使用canvas toDataURL方法或包含的toImage函數(shù)：

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

Chart1.toImage(img)：用圖表填充元素作為PNG圖像。

Chart1.toImage（img，jpg，90）：使用90％壓縮的jpeg圖像填充圖像。

圖表工具

    某些功能被實現(xiàn)為工具對象，可以將這些對象添加到圖表工具數(shù)組屬性中以激活它們。

注釋

    可以使用注釋工具在任何圖表位置顯示自定義文本：

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 );

提示

    將鼠標移到系列數(shù)據(jù)點上時，此工具顯示系列數(shù)據(jù)。

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

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

游標

    可拖動光標線實現(xiàn)為工具對象：

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

   ; 光標工具包括方向?qū)傩裕▽?光標顯示為水平線，垂直或兩者）和拖動光標時觸發(fā)的onchange事件。

拖動點

    DragTool實現(xiàn)鼠標/觸摸點拖動。

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

    包括改變和不變的事件，target屬性確定拖動哪個系列和哪個系列點索引。

滑塊

    通用滑塊控件，可在圖表內(nèi)使用以更改任何值。

 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);

滾輪

    滾動工具顯示另一個圖表的簡化視圖，并允許滾動它。有關(guān)完整示例，請參閱此演示。

系列動畫

    通過改變軸刻度或旋轉(zhuǎn)變換執(zhí)行的簡單動畫：

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

    可以通過html按鈕調(diào)用啟動動畫的animate方法：

    TeeChart for JavaScript/HTML5的教程到這里就結(jié)束了，希望這些教程對您有幫助，如果您還需要其他關(guān)于TeeChart產(chǎn)品的教程，可以點擊圖表控件公司Steema2019文章合集>>查看。

關(guān)注慧聚IT微信公眾號 ???，了解產(chǎn)品的最新動態(tài)及最新資訊。