JSCharts生成网页的柱状图圆饼图以及曲线

1、JS Charts生成网页的柱状图，圆饼图以及曲线图(2009-03-08 17:01:32)标签：js charts 柱状图 圆饼图 曲线图 javascript it  分类：网站技术JS Charts 是一个轻量级的免费javascript 基础图表生成器，支持柱状图，圆饼图以及简单的曲线图。不需要在服务器端安装插件，只需在客户端加入javascript代码。JS Charts 支持XML 和 JSON 数据。图片格式为PNG，兼容所有主要浏览器。 曲线图     &#

2、160;         柱状图               圆饼图                下载官方地址： (需要注册)海外地址： 使用入门1 解压：将压缩包中的jscharts.js解压到网站的目录中2 编码转换：在html代码中的<head></head>标签对里加入<

3、;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

4、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 =

5、 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" val

6、ue="10"/><data unit="20" value="30"/><data unit="25" value="10"/><data unit="30" value="5"/></dataset></JSChart>最容易出错的地方是中文的使用，需要调整各个文件的编码。高级使用一个简单的例子如下：<script type="text/javascript"&

7、gt; 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');

8、0;myChart.setTitleColor('#8E8E8E'); myChart.setTitleFontSize(11); myChart.setAxisNameX(''); myChart.setAxisNameY(''); myChart.setAxisColor('#8420CA'); myChart.setAxisValuesColor('#949494'); myChart.setAxisPaddingLeft(100); my

9、Chart.setAxisPaddingRight(120); myChart.setAxisPaddingTop(50); myChart.setAxisPaddingBottom(40); myChart.setAxisValuesDecimals(3); myChart.setShowXValues(false); myChart.setGridColor('#C5A2DE'); myChart.setLineColor('#BBBBBB'); myChart.setLineWidth(

10、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.se

11、tTooltip(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'); myCh

12、art.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, '

13、;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的在线编辑器生成我们需要的个性化配置，由于功能强大，在次介绍一下使用步骤。第一步：登录。第二步：进入在线编辑器。第三步：创建我的新模板。点击“Create new Chart”第四步：选择一个你