您的位置：首页 > Web前端 > JavaScript

JS Charts生成网页的柱状图，圆饼图以及曲线图

2015-06-26 15:52 731 查看

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

使用入门

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的市场份额的巨大差距，越傻的东西越好

文章转自：http://blog.sina.com.cn/s/blog_3ef9baf10100c5cu.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航