JSChart相關(guān):對JSChart未定義錯誤的解決方法
利用JSChart組件畫圖,由于編碼的問題,JSChart并不支持中文,所以,我們看到圖上的文字只能是英文,只要體現(xiàn)在X軸、Y軸、標(biāo)題的顯示上面,但是這明顯不能滿足我們中國人的使用需求,所以,必須要通過其他方法來讓JSChart畫出顯示中文的圖來。
今天我發(fā)現(xiàn)一個插件,可以讓JSChart支持中文了。非常的驚喜。
看下截圖,呵呵~~
(圖1) 柱狀圖
(圖2) 餅狀圖
(圖3) 折線圖
插件用法有兩種:
1 、直接用jscharts_mb.js代替jscharts.js;(已經(jīng)附加到原代碼尾部的版本)
2、 加載jscharts.js之后再加載jscharts.plugin.mb.js;(獨立包含文件的版本)
以上兩步任選其一,頁面必須編碼為UTF-8,若使用帶有中文的xml數(shù)據(jù),則xml數(shù)據(jù)源的編碼也要轉(zhuǎn)為UTF-8并且加入encoding="UTF-8"標(biāo)簽;之后如果要讓JSCharts支持中文字符顯示,則在生成一個JSChart實例之后緊跟著執(zhí)行一個函數(shù)patchMbString(),如:
var myChart = new JSChart('graph', 'pie');
myChart.patchMbString();
// 接下來的代碼和以前一樣
如果不執(zhí)行patchMbString則和原來的沒有區(qū)別。
此外還加入一個新方法 setFontFamily 用于自定義顯示圖表的字體,如:
myChart.setFontFamily("微軟雅黑"); // 設(shè)置顯示字體為微軟雅黑
另外JSChart默認(rèn)的字體大小只有8px,如果要較清晰地顯示中文的話還得加大字號,這個用自帶的接口就可以了,如:
myChart.setAxisValuesFontSize(9); // 設(shè)置柱狀圖和線條圖的標(biāo)尺字體大小為9px
myChart.setPieUnitsFontSize(10); // 設(shè)置餅圖的項目標(biāo)識字體大小為10px