插件描述：JScharts是一個用于在瀏覽器直接繪制圖表的JavaScript工具包。JScharts支持柱狀圖、圓餅圖以及線性圖，可以直接將這個圖插入網頁，JScharts圖的數據可以來源于XML文件、JSON文件或JavaScript數組變量。

2017-05-09更新：改為無logo版

JScharts使用指南

1.下載JScharts庫

從官網下載JScharts庫，我們使用的是壓縮包里面的jscharts.js文件。它大約150KB。

2. 使用JScharts庫

在網頁文件(如.html或.jsp)包含JScharts庫。

3. 定義容器

要在網頁文件上顯示JScharts生成的圖像，需要把此圖像放入網頁容器。此網頁容器我們通常用

標簽來定義，而且必須強制性地為此DIV元素指定唯一的ID值。比如：This?is?just?a?replacement?in?case?Javascriptis?not?available?or?used?for?SEO?purposes

注意：此DIV容器內的內容都會被JScharts圖像所替代。

4. 顯示JScharts圖像

下面，我們需要寫少量代碼來顯示一個線性圖。首先要準備好圖像所需的數據，我們可以用JavaScript數組來提供數據，數組中的每個元素都是由2個元素所組成。

代碼如下：

varmyData?=?new?Array([10,20],?[15,10],?[20,30],?[25,10],?[30,5]);

varmyChart?=?new?JSChart('chart_container',?'line');

myChart.setDataArray(myData);

myChart.draw();

完整的代碼如下：[html]?view?plaincopyprint?

HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN"?"http://www.w3.org/TR/html4/loose.dtd">

JScharts?TestThis?is?just?a?replacement?in?case?Javascript?is?not?available?or?used?for?SEO?purposes

var?myData?=?new?Array([10,20],?[15,10],?[20,30],?[25,10],?[30,5]);

var?myChart?=?new?JSChart('chartcontainer',?'line');

myChart.setDataArray(myData);

myChart.draw();

5. 在瀏覽器查看結果

1)線性圖

用瀏覽器查看上面的文件，結果如下：

2)柱狀圖

將代碼：varmyData?=?new?Array([10,20],?[15,10],?[20,30],?[25,10],?[30,5]);

varmyChart?=?new?JSChart('chartcontainer',?'line');

改成：varmyData?=?new?Array(['Unit?1',20],?['Unit?2',10],?['Unit?3',30],?['Unit?4',10],['Unit?5',5]);

varmyChart?=?new?JSChart('chartcontainer',?'bar');

則顯示如下：

3)餅狀圖

將代碼：

varmyChart = new JSChart('chartcontainer', 'bar');

改為：

varmyChart = new JSChart('chartcontainer', 'pie');

則顯示如下：

6. JScharts數據來源

JScharts圖像所需的數據，除了來自于JavaScript數組，還可以來源于JSON文件或XML文件。

1)JavaScript數組提供數據的代碼：myChart.setDataArray(myData);

2)JSON文件提供數據的代碼：myChart.setDataJSON(‘data.json’);

data.json文件的內容如下：

[javascript]?view?plaincopyprint?

{

"JSChart"?:?{

"datasets"?:?[

{

"type"?:?"pie",

"data"?:?[

{

"unit"?:?"Unit_1",

"value"?:?"20"

},

{

"unit"?:?"Unit_2",

"value"?:?"10"

},

{

"unit"?:?"Unit_3",

"value"?:?"30"

},

{

"unit"?:?"Unit_4",

"value"?:?"10"

},

{

"unit"?:?"Unit_5",

"value"?:?"5"

}

]

}

]

}

}

3)XML文件提供數據的代碼：myChart.setDataXML(‘data.xml’);

data.xml文件的內容如下：[html]?view?plaincopyprint?

總結

以上是生活随笔為你收集整理的html 报表插件,轻量级图形报表插件JSCharts的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。