JSCharts图表插件详解

?注意：从官方下来的例子都没指定页面编码，在这种情况下，浏览器就会使用默认设置中文编码：GB2312，GBK等；导致无法执行。

?请在html代码中的标签对里加入

?，也就是指定页面编码【只要不是中文编码就行】。

?下载

?官方地址：https://www.sodocs.net/doc/d411721228.html,/JavaScript-Components/Charting/JS-C harts-245/get/JS-Charts_demo.zip (需要注册)

?海外地址：https://www.sodocs.net/doc/d411721228.html,/files/JS-Charts_demo.zip使用入门

? 1 解压：将压缩包中的jscharts.js解压到网站的目录中

? 2 编码转换：在html代码中的标签对里加入,否则会出错。? 3 引入js：在代码中添加 。

? 4 添加容器：在代码中添加

? 5 添加图表所需数据

?方法一：使用json传递数据

?方法二：使用外部xml传递数据

?

?xml的标准格式

?

?最容易出错的地方是中文的使用，需要调整各个文件的编码。

?Customerize-bar

?

?Customerize-line

?

?综合案例：

显示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