jsCharts图表插件使用教程.ppt

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,北风网项目培训,第,25,讲：,jsChart,s,图表插件详解,讲师：风舞烟,JavaScript-,JQuery系列全程精通+图书馆管理系统实战,目录,j,sCharts,图表插件,line,图表,pie,图表,bar,图表,结合,jQuery,综合案例,jsCharts,的中文支持,What is jsCharts,注意：从官方下来的例子都没指定页面编码，在这种情况下，浏览器就会使用默认设置中文编码：,GB2312,，,GBK,等；导致无法执行。,请在,html,代码中的,标签对里加入,，也就是指定页面编码,【,只要不是中文编码就行,】,。,下载,官方地址：,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,的标准格式,最容易出错的地方是中文的使用，需要调整各个文件的编码。,Customerize-bar,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.setAxisValuesColor(#9C1919);/,设置,x|y,轴的数字颜色,myChart.setTextPaddingLeft(10);/,设置,y,轴文字的左边距,myChart.setBarValuesColor(#9C1919);/,设置,bar,数据的颜色,myChart.setBarBorderWidth(0);/,设置,bar,边框大小,myChart.setTitleColor(#8C8382);/,设置标题文字的颜色,myChart.setGridColor(#5D5F5D);/,设置内部,GridView,的颜色,myChart.draw();,Customerize-line,var myData=new Array(10,2,15,0,18,3,19,6,20,8.5,25,10,30,9,35,8,40,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.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.setLineColor(#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 value 25 on X axis);,myChart.setTooltip(40,Tooltip for value 40 on X axis);,myChart.setBackgroundImage(chart_bg.jpg);,myChart.draw();,Customerize-pie,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=#FFCC00,#FFFF00,#CCFF00,#99FF00,#33FF00,#00FF66,#00FF99,#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);/,设置标题,title,的上边距,myChart.setPieUnitsColor(#474747);/,设置,pie,外文字的颜色,myChart.setPieValuesColor(#474747);/,设置,pie,内文字的颜色,myChart.setPieValuesOffset(-10);/,设置,pie,内文字的,margin,myChart.setTitleColor(#fff);,myChart.setSize(616,321);/,设置背景大小,myChart.setBackgroundImage(chart_bg.jpg);/,设置背景图片,/myChart.setTooltip(Jan,customcontents);,myChart.draw();,综合案例：,显示,Author,地区分布统计图表,让,jsCharts,支持中文,正常情况下,jsCharts,不支持中文字符显示，原因在于,JSCharts,输出的字符都是它“画”出来的，把代码反编译一下就能发现它最底部附带了数字、英文和常规字符的绘制数据，显而易见，中文是不可能加进去的。,以下插件可以使,jsCharts,支持中文,如下图所示：,用法有两种：,1,直接用,jscharts_mb.js,代替,jscharts.js,；,(,已经附加到原代码尾部的版本,)2,加载,jscharts.js,之后再加载,jscharts.plugin.mb.js,；,(,独立包含文件的版本,),以上两步任选其一，页面,必须编码为,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,本课程版权归北风网所有,欢迎访问我们的官方网站,