JScharts快速入门

一、JScharts介绍

JScharts是一个用于在浏览器直接绘制图表的JavaScript工具包。JScharts支持柱状图、圆饼图以及线性图，可以直接将这个图插入网页，JScharts图的数据可以来源于XML文件、JSON文件或JavaScript数组变量。JScharts兼容所有主流的浏览器，且使用时无需任何服务器端的插件或模块，是纯JavaScript组件，免费(含水印)。

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库。

3. 定义容器

要在网页文件上显示JScharts生成的图像，需要把此图像放入网页容器。此网页容器我们通常用

注意：此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();

完整的代码如下：

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

3）XML文件提供数据的代码：

myChart.setDataXML(‘data.xml’);

data.xml文件的内容如下：