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

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

背景

    圖表背景外觀由panel/面板子對(duì)象控制：

Chart1.panel.transparent = false;

    panel屬性包含一個(gè)格式子屬性來控制背景的外觀：

Chart1.panel.format.gradient.visible = true;
Chart1.panel.format.shadow.color=”black”;
… etc

標(biāo)題和頁腳

    這兩個(gè)圖表屬性用于在圖表頂部和底部顯示文本：

Chart1.title.text = “Hello”;
Chart1.footer.text = “World”;

    通過添加\ n換行分隔符來完成多行文本：

Chart1.title.text = “Hello \n World”;

    Title和Footer/標(biāo)題和頁腳是Annotation派生的對(duì)象，它們繼承了format子屬性：

Chart1.title.visible = true;
Chart1.title.transparent = false;
Chart1.title.format.gradient.visible = true;
Chart1.title.format.round.x=20;

將數(shù)據(jù)添加到系列

    使用對(duì)象將數(shù)據(jù)添加到圖表中。

    多個(gè)系列可以存在于同一圖表中。 每個(gè)系列可以是不同的類型（線，面，條，餅等），因此您可以混合使用多種樣式。

    直接數(shù)據(jù)：向圖表添加數(shù)據(jù)的最簡單方法是在圖表構(gòu)建時(shí)傳遞一組值。

var Chart1=new Tee.Chart("canvas1", [ 5,6,2,9,1] );

    默認(rèn)創(chuàng)建一個(gè)Tee.Bar類型的新系列對(duì)象，并將該數(shù)組賦值給series.data.values屬性。傳遞多維數(shù)組時(shí)會(huì)創(chuàng)建多個(gè)系列：

var Chart1=new Tee.Chart("canvas1", [ [ 5,6,2,9,1], [ 8,4,3,7,5] ] );

    可以通過類型參數(shù)更改默認(rèn)的系列樣式Tee.Bar：

var Chart1=new Tee.Chart("canvas1", [ [ 5,6,2,9,1], [ 8,4,3,7,5] ] , Tee.Area);

創(chuàng)建系列：使用addSeries方法將系列手動(dòng)添加到圖表中。

var bar =Chart1.addSeries(new Tee.Bar());

    Series具有默認(rèn)的title字符串屬性，用于圖表圖例。

    將系列添加到圖表時(shí)，標(biāo)題將分配給Series加上數(shù)組中的系列索引（Series1，Series2等）。

    您可以覆蓋默認(rèn)標(biāo)題：

bar.title = “My Data”;

    默認(rèn)情況下，系列為空，它們不包含任何數(shù)據(jù)。出于測試目的，可以方便地添加隨機(jī)值，例如：

Chart1.addSeries(new Tee.Line()).addRandom(1000);

    創(chuàng)建系列時(shí)可以內(nèi)聯(lián)指定數(shù)據(jù)：

Chart1.addSeries(new Tee.Pie( [ 10, 20, 30, 40 ] ));

    所有數(shù)據(jù)都存儲(chǔ)在data屬性數(shù)組系列中。您可以直接訪問和修改數(shù)據(jù)：

var a = new Tee.Area();
Chart1.addSeries( a );
a.data.values =  [ 10, 20, 30, 40 ];

    每個(gè)系列點(diǎn)都有一個(gè)相關(guān)的文本標(biāo)簽。 默認(rèn)情況下，標(biāo)簽為空，您可以使用data.labels屬性修改它們：

a.data.labels =  [ “a”, “b”, “c”, “d” ];

    某些系列允許指定點(diǎn)位置或其他點(diǎn)參數(shù)。

    例如，Line和PointXY系列可以選擇在特定的X軸坐標(biāo)處顯示每個(gè)線段或點(diǎn)：

var p = new Tee.PointXY();
p.data.values = [5, 7, 9];
p.data.x = [0.23, 14, 16];
Chart1.addSeries(p);

    像Bubble這樣的其他系列有一個(gè)data.radius的數(shù)組，而Candle系列有data.open，data.close，data.high和data.low數(shù)組。

從其他來源添加數(shù)據(jù)

    在單獨(dú)的腳本（teechart-table.js）中提供了幾個(gè)輔助函數(shù)，能夠從不同的源導(dǎo)入數(shù)據(jù)，例如，

來自textarea html元素：

Chart1.addSeries(new Tee.Bar(document.getElementById("data")) ); 7,Apples
 4
 3,Oranges
 9
 1,Banana
 6,Kiwis
 2

    來自表html元素：

Chart1.fromTable('table1', Tee.Bar, true, 0,0);...

    來自文本文件URL：

Chart1.addSeries(new Tee.Bar(“//myweb.com/mydata.txt”));

    來自相同或不同圖表中的另一個(gè)系列：

Chart1.series.items[0].data = Chart2.series.items[3].data;

    來自xml格式的文本：

 var b=Chart1.addSeries(new Tee.Bar());
 b.loadXML(document.getElementById("xml"));
...<textarea id="xml" rows="10" cols="60" "wrap="off">

    來自JSON格式的文本：

var b=Chart1.addSeries(new Tee.Bar());
b.loadJSON(document.getElementById("json"));

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