一直打算把问卷结果做成图表形式(不是后台统计用的图表),通过JS和CSS的方法太复杂了,为了做个效果又要重新学习很多东西太不划算了。
在网上转了一圈,发现有现成的JS库可供使用,感觉百度的echarts还不错(主要是国内的,文档和实例比较多)。

一、下载js库文件

echarts可以根据你自己的需求生成不同体积的文件,像我这种目前只需要雷达图的人来说,勾选一下雷达图以及几个选项,然后点击下载,就生成了echarts.min.js文件。
echarts-builder.png

二、复制js文件

对于js文件应该复制到哪里,我没有仔细研究,不过最简单的方法就是复制到主题文件夹下的scripts目录,像我采用vanilla主题,则将echarts.min.js上传到/themes/survey/vanilla/scripts下。

三、设置LimeSurvey

1. 通过主题的高级选项

打开主题选项中的高级选项,然后在File Js的文本框中添加你之前复制的js路径和文件名。
limesurvey-theme-setting.png

2. 通过修改配置文件

你也可以找到主题目录下的config.xml文件,找到如下位置:
limesurvey-add-js-file.png
添加代码

<add>scripts/echarts.min.js</add>

四、测试

保存后,随便预览一下某个问题页面(注意主题一定要采用你添加js文件的那个),查看源码你会发现js文件已经被加载了。
limesurvey-script.png

其他说明

1、安全设置

limesurvey-security-setting.png
这一项我不确定是否是必须的,因为最初我按照上述步骤进行的时候,在源代码中点击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

最后修改:2020 年 03 月 05 日
如果觉得我的文章对你有用,请随意赞赏