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

點(diǎn)擊下載TeeChart for JavaScript/HTML5最新試用版

導(dǎo)出圖表

    要從圖表中獲取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圖像填充圖像。

圖表工具

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

注釋

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

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

    注釋對(duì)象具有格式，文本和位置屬性。使用onclick事件時(shí)，注釋也可以充當(dāng)按鈕：

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

提示

    將鼠標(biāo)移到系列數(shù)據(jù)點(diǎn)上時(shí)，此工具顯示系列數(shù)據(jù)。

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

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

游標(biāo)

    可拖動(dòng)光標(biāo)線實(shí)現(xiàn)為工具對(duì)象：

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

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

拖動(dòng)點(diǎn)

    DragTool實(shí)現(xiàn)鼠標(biāo)/觸摸點(diǎn)拖動(dòng)。

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

    包括改變和不變的事件，target屬性確定拖動(dòng)哪個(gè)系列和哪個(gè)系列點(diǎn)索引。

滑塊

    通用滑塊控件，可在圖表內(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);

滾輪

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

系列動(dòng)畫

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

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

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

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

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