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

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

背景

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

Chart1.panel.transparent = false;

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

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

標題和頁腳

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

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

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

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

    Title和Footer/標題和頁腳是Annotation派生的對象，它們繼承了format子屬性：

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

將數據添加到系列

    使用對象將數據添加到圖表中。

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

    直接數據：向圖表添加數據的最簡單方法是在圖表構建時傳遞一組值。

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

    默認創建一個Tee.Bar類型的新系列對象，并將該數組賦值給series.data.values屬性。傳遞多維數組時會創建多個系列：

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

    可以通過類型參數更改默認的系列樣式Tee.Bar：

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

創建系列：使用addSeries方法將系列手動添加到圖表中。

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

    Series具有默認的title字符串屬性，用于圖表圖例。

    將系列添加到圖表時，標題將分配給Series加上數組中的系列索引（Series1，Series2等）。

    您可以覆蓋默認標題：

bar.title = “My Data”;

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

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

    創建系列時可以內聯指定數據：

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

    所有數據都存儲在data屬性數組系列中。您可以直接訪問和修改數據：

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

    每個系列點都有一個相關的文本標簽。 默認情況下，標簽為空，您可以使用data.labels屬性修改它們：

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

    某些系列允許指定點位置或其他點參數。

    例如，Line和PointXY系列可以選擇在特定的X軸坐標處顯示每個線段或點：

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

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

從其他來源添加數據

    在單獨的腳本（teechart-table.js）中提供了幾個輔助函數，能夠從不同的源導入數據，例如，

來自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”));

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

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

關注慧聚IT微信公眾號 ???，了解產品的最新動態及最新資訊。