JSCharts生成网页的柱状图圆饼图以及曲线_第1页
JSCharts生成网页的柱状图圆饼图以及曲线_第2页
JSCharts生成网页的柱状图圆饼图以及曲线_第3页
JSCharts生成网页的柱状图圆饼图以及曲线_第4页
JSCharts生成网页的柱状图圆饼图以及曲线_第5页
已阅读5页，还剩4页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

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”第四步：选择一个你

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论