JScharts快速入门
2013-10-25 10:19
253 查看
作者:chszs,转载需注明。博客主页:http://blog.csdn.net/chszs
JScharts是收费工具,非商业使用收费39美元/1 domain;商业使用收费79美元/1 domain。可免费使用,免费版含水印。要删除水印,需要一个域密钥。
2. 多系列柱状图
3. 水平柱状图
4. 线性图支持动画显示
5. 新的自定义方法
当前JScharts最新版本是3.06版。
支持的浏览器版本为:Chrome 10以上,Chrome 1.5以上,IE 8以上,Safari 3.1以上,Opera 9以上等。
<scripttype="text/javascript" src="js/jscharts.js"></script>
<divid="chartcontainer">This is just a replacement in case Javascriptis not available or used for SEO purposes</div>
注意:此DIV容器内的内容都会被JScharts图像所替代。
代码如下:
<scripttype="text/javascript">
varmyData = new Array([10,20], [15,10], [20,30], [25,10], [30,5]);
varmyChart = new JSChart('chart_container', 'line');
myChart.setDataArray(myData);
myChart.draw();
</script>
完整的代码如下:
用浏览器查看上面的文件,结果如下:
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');
则显示如下:
1)JavaScript数组提供数据的代码:
myChart.setDataArray(myData);
2)JSON文件提供数据的代码:
myChart.setDataJSON(‘data.json’);
data.json文件的内容如下:
3)XML文件提供数据的代码:
myChart.setDataXML(‘data.xml’);
data.xml文件的内容如下:
一、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库。<scripttype="text/javascript" src="js/jscharts.js"></script>
3. 定义容器
要在网页文件上显示JScharts生成的图像,需要把此图像放入网页容器。此网页容器我们通常用<div>标签来定义,而且必须强制性地为此DIV元素指定唯一的ID值。比如:<divid="chartcontainer">This is just a replacement in case Javascriptis not available or used for SEO purposes</div>
注意:此DIV容器内的内容都会被JScharts图像所替代。
4. 显示JScharts图像
下面,我们需要写少量代码来显示一个线性图。首先要准备好图像所需的数据,我们可以用JavaScript数组来提供数据,数组中的每个元素都是由2个元素所组成。代码如下:
<scripttype="text/javascript">
varmyData = new Array([10,20], [15,10], [20,30], [25,10], [30,5]);
varmyChart = new JSChart('chart_container', 'line');
myChart.setDataArray(myData);
myChart.draw();
</script>
完整的代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>JScharts Test</title> </head> <body> <script type="text/javascript" src="sources/jscharts.js"></script> <div id="chartcontainer">This is just a replacement in case Javascript is not available or used for SEO purposes</div> <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(); </script> </body> </html>
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文件的内容如下:
{ "JSChart" : { "datasets" : [ { "type" : "pie", "data" : [ { "unit" : "Unit_1", "value" : "20" }, { "unit" : "Unit_2", "value" : "10" }, { "unit" : "Unit_3", "value" : "30" }, { "unit" : "Unit_4", "value" : "10" }, { "unit" : "Unit_5", "value" : "5" } ] } ] } }
3)XML文件提供数据的代码:
myChart.setDataXML(‘data.xml’);
data.xml文件的内容如下:
<?xml version="1.0"?> <JSChart> <dataset type="pie"> <data unit="Unit_1" value="20"/> <data unit="Unit_2" value="10"/> <data unit="Unit_3" value="30"/> <data unit="Unit_4" value="10"/> <data unit="Unit_5" value="5"/> </dataset> </JSChart>
相关文章推荐
- JScharts快速入门
- JScharts快速入门
- Quartz任务调度快速入门
- PHP快速入门教程:hello world
- 光照贴图快速入门 Lightmapping Quickstart
- activiti 快速入门--组任务(candidate users)分配(6)
- Excel Vba 编程的快速入门
- Spring框架快速入门之简介(三)
- Struts快速入门(一)
- gor引流快速入门
- Hive快速入门
- 服务注册器快速入门教程
- Flume快速入门(二):设计从简
- Flume快速入门(二):设计从简
- 监控宝篇之一(快速入门)
- 【转载】BASH命令快速入门
- Flume快速入门(四):File Channel之FlumeEventQueue
- WINCE驱动程序快速入门
- oc语法快速入门
- Java加密/解密算法快速入门下篇[包括MD5、BASE64、DES、RSA等]