给JSCharts加入中文字符支持

JSCharts本身免费但不是开源的，如果商业应用的话要付费 - $149，
正常情况下这个东西不支持中文字符显示，
原因在于JSCharts输出的字符都是它“画”出来的，
把代码反编译一下就能发现它最底部附带了数字、英文和常规字符的绘制数据，
显而易见，中文是不可能加进去的。

这里给出一种使其支持中文字符显示的方法，
原理是修改JSCharts内部的字符处理函数不让它画字符，
而是直接输出一个常规的Canvas/VML文本对象，
至于具体怎么实现就不赘述了，
有兴趣可以看一下我附加上去的代码，没有混淆也没有压缩过。

代码是以插件形式发布的，没有改动JSCharts本身的任何代码，
可以把这个插件放到jscharts.js尾部，也可以放到独立的文件里再包含一下。

用法有两种：
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

具体可以看JScharts.pdf，有空我翻译一个出来。

参考链接：
1 在canvas中绘制文本 - http://www.iteye.com/topic/390235

2 HTML5 Canvas起步 - http://www.xujiwei.com/blog/?id=907

转载于 http://ilwave.spaces.live.com/blog/cns!4FC356C5DB72A870!2134.entry

评论

1 楼 gexiaoyu1992 2014-08-05