一、JScharts介绍


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

JScharts快速入门-LMLPHP    

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元素指定唯一的ID值。比如:

This is just a replacement in case Javascriptis not available or used for SEO purposes

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

完整的代码如下:

[html] htmlheadtitletitleheadbodyscriptscriptdivdivscriptscriptbodyhtmlJSChartdatasetdatadatadatadatadatadatasetJSChart>  



01-05 07:13