全部博文（626）
分类： HTML5
2013-10-15 13:17:16
JScharts是一个用于在浏览器直接绘制图表的JavaScript工具包。JScharts支持柱状图、圆饼图以及线性图，可以直接将这个图插入网页，JScharts图的数据可以来源于XML文件、JSON文件或JavaScript数组变量。JScharts兼容所有主流的浏览器，且使用时无需任何服务器端的插件或模块，是纯JavaScript组件，免费(含水印)。
JScharts是收费工具，非商业使用收费39美元/1 domain；商业使用收费79美元/1 domain。可免费使用，免费版含水印。要删除水印，需要一个域密钥。
1. 支持3D饼状图或3D柱状图
2. 多系列柱状图
3. 水平柱状图
4. 线性图支持动画显示
5. 新的自定义方法
当前JScharts最新版本是3.06版。
支持的浏览器版本为：Chrome 10以上，Chrome 1.5以上，IE 8以上，Safari 3.1以上，Opera 9以上等。
从官网下载JScharts库，我们使用的是压缩包里面的jscharts.js文件。它大约150KB。
在网页文件（如.html或.jsp）包含JScharts库。
要在网页文件上显示JScharts生成的图像，需要把此图像放入网页容器。此网页容器我们通常用
注意：此DIV容器内的内容都会被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();
完整的代码如下：
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');
则显示如下：
JScharts图像所需的数据，除了来自于JavaScript数组，还可以来源于JSON文件或XML文件。
1）JavaScript数组提供数据的代码：
myChart.setDataArray(myData);
2）JSON文件提供数据的代码：
myChart.setDataJSON(‘data.json’);
data.json文件的内容如下：
3）XML文件提供数据的代码：
myChart.setDataXML(‘data.xml’);
data.xml文件的内容如下：
