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

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

2、站的目录中2 编码转换：在 html代码中的标签对里加入,否则会出错。3 引入 js：在代码中添加 。4 添加容器：在代码中添加正在生产图表.5 添加图表所需数据方法一：使用 json传递数据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();方法二：使用外部 xml传递数据var myChart = new JSChart(graph, l

3、ine);myChart.setDataXML(“data.xml“);myChart.draw();xml的标准格式最容易出错的地方是中文的使用，需要调整各个文件的编码。高级使用一个简单的例子如下：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.setDataArr

4、ay(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.setAxisPaddingTo

5、p(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,

6、 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.s

7、etLabelX(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.s

8、etSize(616, 321);myChart.setBackgroundImage(chart_bg.jpg);myChart.draw();由于 JS Charts的语法并不复杂，此处不详述。下面三个途径可以参考：1 使用下载包中的 pdf使用手册。2 使用下载包中的 examples。(注意中文编码的问题)3 使用 JS Charts的在线编辑器生成我们需要的个性化配置，由于功能强大，在次介绍一下使用步骤。第一步：登录。http:/ new Chart”第四步：选择一个你喜欢的标准模板，然后点击“Use this template”第五步：模板设置完成后，保存。第六步：有 2种方式可以使用你刚才创建的模板。Export 或 Embed code，前者是导出一个压缩文件，文件中包含你需要的所有代码文件，后者是在调用 的 js文件。推荐使用第 3种方式，坦白说，这是懂英文的傻瓜也会用的方式 - 别担心，不是骂你，傻瓜的程度决定了 Wordpress和 Joomla的市场份额的巨大差距，越傻的东西越好