jsCharts图表插件详解

《jsCharts图表插件详解》由会员分享，可在线阅读，更多相关《jsCharts图表插件详解（23页珍藏版）》请在装配图网上搜索。

1、第第25讲：讲：jsCharts图表插件详解图表插件详解讲师：风舞烟JavaScript-JQuery系列全程精通系列全程精通+图书馆管理系统实战图书馆管理系统实战 jsCharts图表插件line图表pie图表bar图表 结合jQuery综合案例jsCharts的中文支持What is jsCharts注意：从官方下来的例子都没指定页面编码，在这种情况下，浏览器就会使用默认设置中文编码：GB2312，GBK等；导致无法执行。请在html代码中的标签对里加入，也就是指定页面编码【只要不是中文编码就行】。下载下载官方地址：官方地址：http:/ 解压：将压缩包中的解压：将压缩包中的jschart

2、s.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);

3、myChart.draw();方法二：使用外部方法二：使用外部xml传递数据传递数据var myChart=new JSChart(graph,line);myChart.setDataXML(data.xml);myChart.draw();xml的标准格式的标准格式最容易出错的地方是中文的使用，需要调整各个文件的编码最容易出错的地方是中文的使用，需要调整各个文件的编码。Customerize-barvar 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);va

4、r 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轴的宽

5、度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.setAxisValuesColor(#9C1919);/设置x|y轴的数字颜色myChart.se

6、tTextPaddingLeft(10);/设置y轴文字的左边距myChart.setBarValuesColor(#9C1919);/设置bar数据的颜色myChart.setBarBorderWidth(0);/设置bar边框大小myChart.setTitleColor(#8C8382);/设置标题文字的颜色myChart.setGridColor(#5D5F5D);/设置内部GridView的颜色myChart.draw();Customerize-linevar myData=new Array(10,2,15,0,18,3,19,6,20,8.5,25,10,30,9,35,8,4

7、0,5,45,6,50,2.5);var myChart=new JSChart(graph,line);myChart.setDataArray(myData);myChart.setAxisColor(#656565);myChart.setAxisNameColor(#4A4A4A);myChart.setAxisNameFontSize(10);myChart.setAxisNameX(Horizontal axis values);myChart.setAxisNameY(Vertical axis);myChart.setAxisPaddingBottom(60);myChart.

8、setAxisPaddingLeft(180);myChart.setAxisPaddingRight(170);myChart.setAxisPaddingTop(65);myChart.setAxisValuesColor(#656565);myChart.setAxisValuesNumberX(6);myChart.setBackgroundColor(#EEE);myChart.setGrid(false);myChart.setLabelY(0,Low);myChart.setLabelY(5,Medium);myChart.setLabelY(10,High);myChart.s

9、etLineColor(#8638D5);myChart.setShowYValues(false);myChart.setTitle(A customized chart);myChart.setTitleColor(#505050);myChart.setSize(616,321);myChart.setTextPaddingBottom(20);myChart.setTextPaddingLeft(120);myChart.setTextPaddingTop(15);myChart.setFlagRadius(6);myChart.setTooltip(25,Tooltip for va

10、lue 25 on X axis);myChart.setTooltip(40,Tooltip for value 40 on X axis);myChart.setBackgroundImage(chart_bg.jpg);myChart.draw();Customerize-pievar 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=#FFCC00,#FFFF00,#CCFF00,#99FF00,#33FF00,#00FF66,#00

11、FF99,#00FFCC,#FF0000,#FF3300,#FF6600,#FF9900;var myChart=new JSChart(graph,pie);myChart.setDataArray(myData);/设置数据myChart.colorizePie(colors);/设置pie颜色myChart.setPiePosition(308,170);/设置pie 位置myChart.setPieRadius(95);/设置圆的缩放大小myChart.setPieUnitsFontSize(8);/设置pie外文字的大小myChart.setTextPaddingTop(30);/设

12、置标题title的上边距myChart.setPieUnitsColor(#474747);/设置pie外文字的颜色myChart.setPieValuesColor(#474747);/设置pie内文字的颜色myChart.setPieValuesOffset(-10);/设置pie内文字的marginmyChart.setTitleColor(#fff);myChart.setSize(616,321);/设置背景大小myChart.setBackgroundImage(chart_bg.jpg);/设置背景图片/myChart.setTooltip(Jan,customcontents)

13、;myChart.draw();综合案例：显示Author地区分布统计图表让jsCharts支持中文 正常情况下jsCharts不支持中文字符显示，原因在于JSCharts输出的字符都是它“画”出来的，把代码反编译一下就能发现它最底部附带了数字、英文和常规字符的绘制数据，显而易见，中文是不可能加进去的。以下插件可以使jsCharts支持中文如下图所示：用法有两种：1 直接用jscharts_mb.js代替jscharts.js；(已经附加到原代码尾部的版本)2 加载jscharts.js之后再加载jscharts.plugin.mb.js；(独立包含文件的版本)以上两步任选其一，页面必须编码为

14、必须编码为UTF-8，若使用带有中文的xml数据，则xml数据源的编码也要转为UTF-8并且加入encoding=UTF-8标签；之后如果要让JSCharts支持中文字符显示，则在生成一个JSChart实例之后紧跟着执行一个函数patchMbString()，如：var myChart=new JSChart(graph,pie);myChart.patchMbString();/接下来的代码和以前一样接下来的代码和以前一样如果不执行patchMbString则和原来的没有区别，此外还加入一个新方法 setFontFamily 用于自定义显示图表的字体，如：myChart.setFontFamily(微软雅黑微软雅黑);/设置显示字体为微软雅设置显示字体为微软雅黑黑另外JSChart默认的字体大小只有8px，如果要较清晰地显示中文的话还得加大字号，这个用自带的接口就可以了，如：myChart.setAxisValuesFontSize(9);/设置柱状图和线条图的标尺设置柱状图和线条图的标尺字体大小为字体大小为9px myChart.setPieUnitsFontSize(10);/设置饼图的项目标识字体大设置饼图的项目标识字体大小为小为10px欢迎访问我们的官方网站