91传媒网站,欧美日韩亚,成人精品免费在

圖表庫TeeChart for JavaScript/HTML5實用教程（一）

翻譯|使用教程|編輯：況魚杰|2019-08-12 16:06:56.510|閱讀 533 次

概述：TeeChart for JavaScript/HTML5是基于HTML5畫布的跨瀏覽器JavaScript圖表庫，本節(jié)是教程的入門教程，幫助您了解如何創(chuàng)建圖表以及圖表的屬性。

# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

相關鏈接：

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

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

如何創(chuàng)建圖表

將TeeChart腳本添加到您的html頁面，最好是：

<script src="//steema.us/files/jscript/src/teechart.js" type="text/javascript"></script>

添加html5 canvas標簽以顯示圖表：

<canvas id="canvas" width="300" height="200">
This browser does not seem to support HTML5 Canvas.
</canvas>

添加代碼以創(chuàng)建包含示例數(shù)據(jù)的圖表：

<script type="text/javascript">
function draw() {
  Chart1=new Tee.Chart("canvas");
  Chart1.addSeries(new Tee.Pie([5,3,2,7,1]) );
  Chart1.draw();
}
</script>

從適當?shù)奈恢谜{(diào)用draw（）函數(shù)，例如在body的onload事件中：

<body onload="draw()">

結果輸出圖表是：

截圖未命名.jpg

上面的代碼執(zhí)行以下操作：

創(chuàng)建一個Chart對象，將畫布id作為參數(shù)傳遞。
調(diào)用Chart addSeries方法，傳遞一個新的Pie系列對象，其中填充了一組數(shù)據(jù)編號。
調(diào)用Chart draw（）方法生成并將圖表顯示為canvas。

注意：

Tee前綴指的是TeeChart.js腳本中的所有內(nèi)容，此前綴可避免與有相同全局命名空間的對象沖突。
canvas id參數(shù)也可以是DOM對象，例如：new Tee.Chart（document.getElementById（canvas））。
在這個限量版本中，可用的系列樣式是Line，Bar，HorizBar，PointXY，Area，HorizArea，Pie，Donut和Bubble。
許多系列可以添加并混合到同一個圖表中，但將Pie或Donut與非圓形樣式混合可能在視覺上不太愉快。

圖表的主要屬性和類

Chart對象包括以下屬性和子對象：

Chart1.series，Tee.Series派生對象的列表，如Line，Bar，Pie等。
系列對象用于分組和顯示數(shù)據(jù)值，其中許多可以添加到同一個圖表中。
使用Tee.Series構造函數(shù)創(chuàng)建系列的幾種方法：
空系列，傳遞Chart參數(shù)：var Series1 = new Tee.Line（Chart1）;
創(chuàng)建并填充數(shù)據(jù)：var Series1 = Tee.Line（Chart1，[1,2,3,4,5]）;
Chart1.title，在上方顯示文本。
Chart1.footer，在底部顯示文本。
Chart1.legend，顯示系列列表或給定系列值列表。
Chart1.axes，一個有四個軸的子對象：Left，Top，Right和Bottom。
Chart1.panel，定義圖表背景屬性。
Chart1.walls，一個有四個墻的子對象：左，下，右和后。
Chart1.tools，Tee.Tool派生對象的列表，如CursorTool或Annotations。
Chart1.zoom，用于控制鼠標/觸摸拖動的屬性，用于縮放圖表軸。
Chart1.scroll，用于控制鼠標/觸摸拖動的屬性，用于滾動圖表內(nèi)容。
Chart1.aspect，一個具有控制畫布參數(shù)的屬性的子對象。