一、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格式)