JScharts快速入門

jopen 10年前發布 | 18K 次閱讀 JScharts 圖表/報表制作

一、JScharts介紹

JScharts是一個用于在瀏覽器直接繪制圖表的JavaScript工具包。 JScharts支持柱狀圖、圓餅圖以及線性圖，可以直接將這個圖插入網頁，JScharts圖的數據可以來源于XML文件、JSON文件或 JavaScript數組變量。JScharts兼容所有主流的瀏覽器，且使用時無需任何服務器端的插件或模塊，是純JavaScript組件，免費(含水印)。

JScharts快速入門

JScharts是收費工具，非商業使用收費39美元/1 domain；商業使用收費79美元/1 domain。可免費使用，免費版含水印。要刪除水印，需要一個域密鑰。

二、JScharts新特性

1. 支持3D餅狀圖或3D柱狀圖

2. 多系列柱狀圖

3. 水平柱狀圖

4. 線性圖支持動畫顯示

5. 新的自定義方法

當前JScharts最新版本是3.06版。

支持的瀏覽器版本為：Chrome 10以上，Chrome 1.5以上，IE 8以上，Safari 3.1以上，Opera 9以上等。

三、JScharts使用指南

1.下載JScharts庫

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

2. 使用JScharts庫

在網頁文件（如.html或.jsp）包含JScharts庫。

<scripttype="text/javascript" src="js/jscharts.js"></script>

3. 定義容器

要在網頁文件上顯示JScharts生成的圖像，需要把此圖像放入網頁容器。此網頁容器我們通常用<div>標簽來定義，而且必須強制性地為此DIV元素指定唯一的ID值。比如：

<divid="chartcontainer">This is just a replacement in case Javascriptis not available or used for SEO purposes</div>

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

4. 顯示JScharts圖像

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

代碼如下：

<scripttype="text/javascript">
varmyData = new Array([10,20], [15,10], [20,30], [25,10], [30,5]);
varmyChart = new JSChart('chart_container', 'line');
myChart.setDataArray(myData);
myChart.draw();
</script></pre>

完整的代碼如下：



     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
    <html>  
     <head>  
      <title>JScharts Test</title>  
     </head>  
     <body>  
    <script type="text/javascript" src="sources/jscharts.js"></script>  
    <div id="chartcontainer">This is just a replacement in case Javascript is not available or used for SEO purposes</div>  
    <script type="text/javascript">  
    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();  
    </script>  
     </body>  
    </html>  


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文件的內容如下：





    {  
    "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文件的內容如下：


<?xml version="1.0"?>  
<JSChart>  
<dataset type="pie">  
<data unit="Unit_1" value="20"/>  
<data unit="Unit_2" value="10"/>  
<data unit="Unit_3" value="30"/>  
<data unit="Unit_4" value="10"/>  
<data unit="Unit_5" value="5"/>  
</dataset>  
</JSChart>