[jsCharts图表插件使用教程.ppt

目录 jsCharts图表插件 line图表 pie图表 bar图表 结合jQuery综合案例 jsCharts的中文支持 What is jsCharts 注意：从官方下来的例子都没指定页面编码，在这种情况下，浏览器就会使用默认设置中文编码：GB2312，GBK等；导致无法执行。 请在html代码中的head/head标签对里加入 meta http-equiv=”content-type” content=”text/html;charset=utf-8″，也就是指定页面编码【只要不是中文编码就行】。 下载 官方地址：/JavaScript-Components/Charting/JS-Charts-245/get/JS-Charts_demo.zip (需要注册) 海外地址：/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/javascriptvar 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/javascriptvar myChart = new JSChart(graph, line);myChart.setDataXML(data.xml);myChart.draw();/script xml的标准格式 ?xml version=1.0?JSChartdataset type=linedata 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 最容易出错的地方是中文的使用，需要调整各个文件的编码。 Customerize-bar script type=text/javascript var myData = new Array([Jan, 2], [Feb, 1], [Mar, 3], [Apr, 6], [May, 8], [Jun, 10], [Jul, 9], [Aug, 8], [Sep, 5], [Oct, 6], [Nov, 2], [Dec, 4]); var colors = [#CE0000, #EF2323, #D20202, #A70000, #850000, #740000, #530000, #850000, #B00000, #9C0404, #CE0000, #BA0000]; var myChart = new JSChart(graph, bar); myChart.setDataArray(myData); myChart.colorizeBars(colors); myChart.setDataArray(myData); myChart.setAxisColor(#9D9F9D);//设置x|y轴的颜色 myChart.setAxisWidth(1); //设置x|y轴的宽度 myChart.setAxisNameX(Months);//x轴的文字 myChart.setAxisNameY(Values);//y轴的文字 myChart.setAxisNameColor(#655D5D);//x|y轴的文字的颜色 myChart.setAxisNameFontSize(9);//x|y轴的文字的大小 myChart.setAxisPaddingLeft(50);//x轴的左边距 myChart.setAxisValuesDecimals(1); //设置数字的小数点后的位数 myChart.se