一直打算把问卷结果做成图表形式(不是后台统计用的图表),通过JS和CSS的方法太复杂了,为了做个效果又要重新学习很多东西太不划算了。
在网上转了一圈,发现有现成的JS库可供使用,感觉百度的echarts还不错(主要是国内的,文档和实例比较多)。
一、下载js库文件
echarts可以根据你自己的需求生成不同体积的文件,像我这种目前只需要雷达图的人来说,勾选一下雷达图以及几个选项,然后点击下载,就生成了echarts.min.js文件。
二、复制js文件
对于js文件应该复制到哪里,我没有仔细研究,不过最简单的方法就是复制到主题文件夹下的scripts目录,像我采用vanilla主题,则将echarts.min.js上传到/themes/survey/vanilla/scripts下。
三、设置LimeSurvey
1. 通过主题的高级选项
打开主题选项中的高级选项,然后在File Js的文本框中添加你之前复制的js路径和文件名。
2. 通过修改配置文件
你也可以找到主题目录下的config.xml文件,找到如下位置:
添加代码
<add>scripts/echarts.min.js</add>
四、测试
保存后,随便预览一下某个问题页面(注意主题一定要采用你添加js文件的那个),查看源码你会发现js文件已经被加载了。
其他说明
1、安全设置
这一项我不确定是否是必须的,因为最初我按照上述步骤进行的时候,在源代码中点击js文件是发生404错误的,也就是并没有真正链接上。而当我开启这个选项之后就好了(默认是禁止)。
可是我在写这文章时尝试把它再次关掉之后,并没有发生错误。
如果你跟我一样,按照上述步骤进行出错的话不妨开一下这个选项。
2、代码中的{}问题
LimeSurvey中{}具有特殊意义,被使用在自身的表达式中,所以js代码最好按照官方要求来。
<script type="text/javascript" charset="utf-8">
$(function() {console.log('broken javascript');});
</script>
将上述代码中的{}各自另起一行,改成如下形式:
<script type="text/javascript" charset="utf-8">
$(function() {
console.log('Adding a line feed for javascript');
});
</script>
还有一种形式,如果代码比较短的话,如下面这种:
<script type="text/javascript" charset="utf-8">
if(myvar==1) {console.log('broken javascript');};
</script>
在{后和}前各增加一个空格,改为如下:
<script type="text/javascript" charset="utf-8">
if(myvar==1) { console.log('Adding a space for javascript'); };
</script>
我就是因为这一项调试了很久(有一组{}一直没注意到,加上对于添加js库也不确定)。
好了,随便找段代码实验一下,效果如下:
参考文档:
Workarounds: Manipulating a survey at runtime using Javascript