翻譯|使用教程|編輯:況魚杰|2019-08-12 16:06:56.510|閱讀 533 次
概述:TeeChart for JavaScript/HTML5是基于HTML5畫布的跨瀏覽器JavaScript圖表庫,本節是教程的入門教程,幫助您了解如何創建圖表以及圖表的屬性。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
TeeChart for JavaScript/HTML5是一個100%的 JavaScript/ HTML5圖表庫,可以在所有兼容的瀏覽器中以原生的Javascript格式使用HTML5 Canvas繪制圖表。
點擊下載TeeChart for JavaScript/HTML5最新試用版
如何創建圖表
將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>
添加代碼以創建包含示例數據的圖表:
<script type="text/javascript"> function draw() { Chart1=new Tee.Chart("canvas"); Chart1.addSeries(new Tee.Pie([5,3,2,7,1]) ); Chart1.draw(); } </script>
從適當的位置調用draw()函數,例如在body的onload事件中:
<body onload="draw()">
結果輸出圖表是:
上面的代碼執行以下操作:
創建一個Chart對象,將畫布id作為參數傳遞。
調用Chart addSeries方法,傳遞一個新的Pie系列對象,其中填充了一組數據編號。
調用Chart draw()方法生成并將圖表顯示為canvas。
注意:
Tee前綴指的是TeeChart.js腳本中的所有內容,此前綴可避免與有相同全局命名空間的對象沖突。
canvas id參數也可以是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等。
系列對象用于分組和顯示數據值,其中許多可以添加到同一個圖表中。
使用Tee.Series構造函數創建系列的幾種方法:
空系列,傳遞Chart參數:var Series1 = new Tee.Line(Chart1);
創建并填充數據: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,用于控制鼠標/觸摸拖動的屬性,用于滾動圖表內容。
Chart1.aspect,一個具有控制畫布參數的屬性的子對象。
關注慧聚IT微信公眾號 ???,了解產品的最新動態及最新資訊。
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自: