JsCharts圖表的介紹和簡單使用


一、JSCharts介紹

JScharts是一個用於在瀏覽器直接繪制圖表的javascript工 具包。JScharts支持柱狀圖、圓餅圖以及線性圖,可以直接將這個圖插入網頁,

JScharts圖的數據可以來源於XML文件、JSON文件或 JavaScript數組變量。JScharts兼容所有主流的瀏覽器,且使用時無需任何服務器端的

插件或模塊,是純JavaScript組件,免費(含 水印)。

二、JsChart的特性

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

2. 多系列柱狀圖

3. 水平柱狀圖

4. 線性圖支持動畫顯示

5. 新的自定義方法

三、JSCharts的使用指南

1、下載Js庫,從官網下載,使用的是jscharts.js文件

2、使用js庫,引用<script type="text/javascript" src="js/jscharts.js">

3、定義容器,<div id="myjschart">this is context</div>

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

四、JSCharts的使用

1、曲線圖

2、柱狀圖

3、餅狀圖

例子:

<!doctype html>
<html>  
 <head>
 <meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    
  <title>JScharts Test</title>  
 </head>
 <script type="text/javascript" src="js/jscharts.js"></script>
 <body>   
<div id="chartcontainer">這只是一個替換內容</div><br/>
<div id="chartcontainer1">這只是一個替換內容</div><br/>
<div id="chartcontainer2">這只是一個替換內容</div><br/>
<div id="chartcontainer3">這只是一個替換內容</div><br/>
<div id="chartcontainer4">這只是一個替換內容</div><br/>
<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();  
    
    //柱狀圖
    var myData1 = new Array(['Unit 1',20], ['Unit 2',10], ['Unit 3',30], ['Unit 4',10],['Unit 5',5]);
    var myChart1 = new JSChart('chartcontainer1', 'bar');
    myChart1.setDataArray(myData1);
    myChart1.draw();
    
    //餅狀圖
    var myData2 = new Array(['Unit 1',20], ['Unit 2',10], ['Unit 3',30], ['Unit 4',10],['Unit 5',5],['Unit 6',15],['Unit 7',5]);
    var myChart2 = new JSChart('chartcontainer2', 'pie');
    myChart2.setDataArray(myData2);
    myChart2.draw();
    
    //餅狀圖(xml導入數據)
    var myChart3 = new JSChart('chartcontainer3', 'pie');
    myChart3.setDataXML('js/jschart_data.xml');
    myChart3.draw();
    
    //餅狀圖(json導入數據)
    var myChart4 = new JSChart('chartcontainer4', 'pie');
    myChart4.setDataJSON('js/jschart_data.json');
    myChart4.draw();
</script>  
 </body>  
</html>


Xml和Json的內容

 

運行后的效果圖:

        曲線圖(如上)

      柱狀圖(如上)

      餅形圖(如上)

    餅形圖(如上,XML格式)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM