用LimeSurvey做了一个问卷,结果中的图形采用echarts生成。代码几乎没变,之前都能生成,这次却不行了,有点奇怪。
首先,之前每次做问卷都是实用手机浏览器,而这次直接采用微信扫码后做的问卷,也就是说微信所采用的浏览器并不支持echarts,但如果使用iphone的微信却一点问题也没有。如果用安卓手机的浏览器(自带和夸克)来测试问卷,结果也是正常的。
从网上搜索的结果来看,安卓貌似跟echarts有兼容性问题,好像是浏览器内核的原因,具体我也搞不清楚也不想搞清楚,我要的就是如何解决问题。
兼容问题中有个关键字还是引起了我的注意,就是图形渲染采用canvas的话可能存在版本问题,所以在github的微信专用echarts中甚至要开启老版本的canvas渲染。
既然是这样,那就采用svg格式好了,替换之后,图形都挤在了一起,只有放大缩小窗口之后才能正常显示,可是手机上哪有这样的放大缩小窗口。
这个问题倒也不是个案,只是给出的解决方案很少,抱着试一试的心态,在代码后面加入了以下内容:
var myEvent = new Event('resize');
window.dispatchEvent(myEvent);
再次预览问卷,图形正常了。
不过这里有一点需要说明,就是resize的问题,如果从官网样例中抄来的代码,可能是这样的:
window.addEventListener('resize', myChart.resize);
即便加了上面两行代码还是挤在一起,而必须调整成如下:
window.addEventListener("resize", function () {
setTimeout(function () {
myChart.resize();
}, 100)
});
100是Timeout的时间,根据自己需要调整好了。