Blog / 阅读

JS Charts,javascript生成曲线图、柱状图、饼状图、走势图的JS插件。

by admin on 2014-03-25 13:33:30 in ,



JS Charts 是一个轻量级的免费javascript 基础图表生成器,支持柱状图,圆饼图以及简单的曲线图。不需要在服务器端安装插件,只需在客户端加入javascript代码。JS Charts 支持XML 和 JSON 数据。图片格式为PNG,兼容所有主要浏览器。
 

曲线图

柱状图

圆饼图

下载

官方地址:http://www.jumpeyecomponents.com/JavaScript-Components/Charting/JS-Charts-245/get/JS-Charts_demo.zip (需要注册)

海外地址:http://www.hostingreviewcenter.com/files/JS-Charts_demo.zip

本站下载:http://www.526net.com/upload/file/2014/JS-Charts_demo.zip

使用入门
1 解压:将压缩包中的jscharts.js解压到网站的目录中
2 编码转换:在html代码中的<head></head>标签对里加入<meta http-equiv="content-type" content="text/html;charset=utf-8">,否则会出错。
3 引入js:在代码中添加<script type="text/javascript" src="jscharts.js"></script> 。
4 添加容器:在代码中添加<div id="graph">正在生产图表...</div>
5 添加图表所需数据
方法一:使用json传递数据
<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>
方法二:使用外部xml传递数据
<script type="text/javascript">
var myChart = new JSChart('graph', 'line');
myChart.setDataXML("data.xml");
myChart.draw();
</script>
xml的标准格式
<?xml version="1.0"?>
<JSChart>
<dataset type="line">
<data unit="10" value="20"/>
<data unit="15" value="10"/>
<data unit="20" value="30"/>
<data unit="25" value="10"/>
<data unit="30" value="5"/>
</dataset>
</JSChart>
最容易出错的地方是中文的使用,需要调整各个文件的编码。


高级使用
一个简单的例子如下:
<script type="text/javascript">
 var myData = new Array([1997, 7.80], [1998, 4.80], [1999, 6.50], [2000, 6.10], [2001, 4.40], [2002, 5.80], [2003, 4.00], [2004, 8.50], [2005, 8.90], [2006, 9.20]);
 var myChart = new JSChart('graph', 'line');
 myChart.setDataArray(myData);
 myChart.setTitle('India GDP');
 myChart.setTitleColor('#8E8E8E');
 myChart.setTitleFontSize(11);
 myChart.setAxisNameX('');
 myChart.setAxisNameY('');
 myChart.setAxisColor('#8420CA');
 myChart.setAxisValuesColor('#949494');
 myChart.setAxisPaddingLeft(100);
 myChart.setAxisPaddingRight(120);
 myChart.setAxisPaddingTop(50);
 myChart.setAxisPaddingBottom(40);
 myChart.setAxisValuesDecimals(3);
 myChart.setShowXValues(false);
 myChart.setGridColor('#C5A2DE');
 myChart.setLineColor('#BBBBBB');
 myChart.setLineWidth(2);
 myChart.setFlagColor('#9D12FD');
 myChart.setFlagRadius(4);
 myChart.setTooltip([1997, 'GDP 7.80']);
 myChart.setTooltip([1998, 'GDP 4.80']);
 myChart.setTooltip([1999, 'GDP 6.50']);
 myChart.setTooltip([2000, 'GDP 6.10']);
 myChart.setTooltip([2001, 'GDP 4.40']);
 myChart.setTooltip([2002, 'GDP 5.80']);
 myChart.setTooltip([2003, 'GDP 4.00']);
 myChart.setTooltip([2004, 'GDP 8.50']);
 myChart.setTooltip([2005, 'GDP 8.90']);
 myChart.setTooltip([2006, 'GDP 9.20']);
 myChart.setLabelX([1997, '1997']);
 myChart.setLabelX([1998, '1998']);
 myChart.setLabelX([1999, '1999']);
 myChart.setLabelX([2000, '2000']);
 myChart.setLabelX([2001, '2001']);
 myChart.setLabelX([2002, '2002']);
 myChart.setLabelX([2003, '2003']);
 myChart.setLabelX([2004, '2004']);
 myChart.setLabelX([2005, '2005']);
 myChart.setLabelX([2006, '2006']);
 myChart.setSize(616, 321);
 myChart.setBackgroundImage('chart_bg.jpg');
 myChart.draw();
</script>
由于JS Charts的语法并不复杂,此处不详述。下面三个途径可以参考:
1 使用下载包中的pdf使用手册。
2 使用下载包中的examples。(注意中文编码的问题)
3 使用JS Charts的在线编辑器生成我们需要的个性化配置,由于功能强大,在次介绍一下使用步骤。
第一步:登录。http://www.jscharts.com/login
第二步:进入在线编辑器。http://www.jscharts.com/editor
第三步:创建我的新模板。点击“Create new Chart”
第四步:选择一个你喜欢的标准模板,然后点击“Use this template”
第五步:模板设置完成后,保存。
第六步:有2种方式可以使用你刚才创建的模板。Export或Embed code,前者是导出一个压缩文件,文件中包含你需要的所有代码文件,后者是在调用www.jscharts.com的js文件。
 
推荐使用第3种方式,坦白说,这是懂英文的傻瓜也会用的方式 - 别担心,不是骂你,傻瓜的程度决定了Wordpress和Joomla的市场份额的巨大差距,越傻的东西越好


写评论

相关文章

上一篇:flash音量控制

下一篇:LigerUI真假分页以及过滤查询功能

评论

写评论

* 必填.

分享

栏目

赞助商


热门文章

Tag 云