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

JSCharts生成网页的柱状图，圆饼图以及曲线图(2009-03-08 17:01:32)标签：jscharts柱状图圆饼图曲线图javascriptit 分类：网站技术JS Charts 是一个轻量级的免费javascript 基础图表生成器，支持柱状图，圆饼图以及简单的曲线图。不需要在服务器端安装插件，只需在客户端加入javascript代码。JS Charts 支持XML 和 JSON 数据。图片格式为PNG，兼容所有主要浏览器。曲线图 柱状图 圆饼图 下载官方地址：/JavaScript-Components/Charting/JS-Charts-245/get/JS-Charts_demo.zip (需要注册)海外地址：/files/JS-Charts_demo.zip使用入门1 解压：将压缩包中的jscharts.js解压到网站的目录中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, line);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.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();由于JS Charts的语法并不复杂，此处不详述。下面三个途径可以参考：1 使用下载包中的pdf使用手册。2 使用下载包中的examples。(注意中文编码的问题)3 使用JS Charts的在线编辑器生成我们需要的个性化配置，由于功能强大，在次介绍一下使用步骤。第一步：登录。/login第二步：进入在线编辑器。/editor第三步：创建我的新模板。点击“Create new Chart”第四步：选择一个你喜欢的标准模板，然后点击“Use this template”第五步：模板设置完成后，保存。第六步：有2种方式可以使用你刚才创建的模板。Export或Embed code，