2017-05-09更新：改为无logo版
JScharts使用指南
1.下载JScharts库
从官网下载JScharts库，我们使用的是压缩包里面的jscharts.js文件。它大约150KB。
2. 使用JScharts库
在网页文件（如.html或.jsp）包含JScharts库。
1 | <scripttype="text/javascript" src="js/jscharts.js"></script> |
3. 定义容器
要在网页文件上显示JScharts生成的图像，需要把此图像放入网页容器。此网页容器我们通常用<div>标签来定义，而且必须强制性地为此DIV元素指定唯一的ID值。比如：
1 | <divid="chartcontainer">This is just a replacement in case Javascriptis not available or used for SEO purposes</div> |
注意：此DIV容器内的内容都会被JScharts图像所替代。
4. 显示JScharts图像
下面，我们需要写少量代码来显示一个线性图。首先要准备好图像所需的数据，我们可以用JavaScript数组来提供数据，数组中的每个元素都是由2个元素所组成。
代码如下：
1 2 3 4 5 6 | <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> |
完整的代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | [html] view plaincopyprint?<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/"> <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）柱状图
将代码：
1 2 | varmyData = new Array([10,20], [15,10], [20,30], [25,10], [30,5]);varmyChart = new JSChart('chartcontainer', 'line'); |
改成：
1 2 | 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数组提供数据的代码：
1 | myChart.setDataArray(myData); |
2）JSON文件提供数据的代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | myChart.setDataJSON(‘data.json’);data.json文件的内容如下：[javascript] view plaincopyprint?{ "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文件提供数据的代码：
1 | myChart.setDataXML(‘data.xml’); |
data.xml文件的内容如下：
1 2 3 4 5 6 7 8 9 10 11 | [html] view plaincopyprint?<?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> |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： js翻书效果
- 下一个特效： dtree权限控制复选框插件