HTML演示＋交互图表

（标题图片来源：HighCharts）

这两天关注了一下数据可视化的JS库，选择真是太多了：国外有ChartJS, D3, Plotly, RawGraphs, Flot, HighCharts，国内有百度开发的Echarts。D3的名气就不用说了，这两年火得不行，尝试了一下感觉语法结构对我这个javascript新手还是太复杂；又试了下Echarts，效果还是挺绚丽的，不过我使用上也感觉怪怪的。Plotly基于D3，覆盖全面，R/Python/JavaScript等等都可以直接调用，语法上应该和D3类似，准备以后再试。看过了HighCharts，语法结构上符合对于图表的理解：title, xAxis, yAxis, data series等等，配置起来也相对简单。

至于为什么想到用html作幻灯演示，我想有以下几点优势：

格式编辑（相对）容易：不用考虑格式，对齐，字体大小等等问题；reveal.js还支持直接用markdown；
便携性和格式兼容性：基本上现代浏览器都可以播放，甚至可以用手机或平板
交互性强：数据甚至可以用实时的；
效果（相对）绚丽

JS工具选择也不少：revealjs, impressjs/jmpressjs, presenteerjs, webslides等等，初试了下RevealJS，上手还是比较快的。

RevealJS HTML基本框架

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42


<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Test Slide with HighCharts</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/reveal.js/3.5.0/css/reveal.css" />
    <link rel="stylesheet" href="https://cdn.bootcss.com/reveal.js/3.5.0/css/theme/moon.min.css" />
</head>

<body>
  <div class="reveal">
    <div class="slides">

      <section>
          <h3> <em>Presentation Title</h3>
	    <p>
	    Author<br />
	    <small>Date: 06.06.2017</small>
	    </p>
      </section>

      <section>
	<h3> First Slide </h3>
	  This is some text.
      </section>

      ......

    </div>
  </div>

  <script src="https://cdn.bootcss.com/reveal.js/3.5.0/js/reveal.js"></script>
    <script>
        Reveal.initialize({
            progress: true,
            transition: 'none' // default/cube/page/concave/linear(2d)
        });
    </script>

</body>
</html>

加入HighCharts图表

在head中加入jQuery, HighCharts库

1
2
3


<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

在幻灯片section中加入作图框架

1

<center><div id="chart" style="width:80%; height:80%"></div></center>

数据结构（以带误差线的柱状图为例）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56


<script>
$(function () {
    var chart1 = new Highcharts.Chart({
        chart: {
            renderTo: 'chart',
            type: 'column'
        },
        title: {
            text: 'Bar Plot'
        },
        subtitle: {
            text: 'Just some pointless data'
        },
        xAxis: {
            categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']
        },
        yAxis: {
            title: {
                text: 'Mean Value'
            }
        },
	series: [{
	    showInLegend: false,
            name:'Mean',
            data: [
            {y: 34.4, color: 'red'},
            {y: 123, color: 'blue'},
            {y: 56, color: 'green'},
            {y: 76, color: 'darkgrey'},
            {y: 3, color: 'yellow'},
            {y: 14.6, color: 'purple'},
            {y: 88, color: 'brown'},
            {y: 5.9, color: 'orange'}
            ],
            tooltip: {
                pointFormat: '<span style="font-weight: bold; color: {series.color}">{series.name}</span>: <b>{point.y:.1f}</b><br /> '
        }
        }, {
            name: 'data error',
            type: 'errorbar',
            data: [[31, 42], [95, 143], [43, 60], [54, 99], [2.5, 3.6], [6, 18], [64, 95], [3.3, 9.5]],
            tooltip: {
                pointFormat: '(Range: {point.low}-{point.high} )<br/>'
        }
      }],
        tooltip: {
            shared: false
        },
        credits: {
            enabled: true,
            text: 'ZhigangLu.com',
            href: 'https://zhiganglu.com',
      }
    });
});
</script>

效果如下：

如果看不到图表，请右键下载Frame为html/page source，用浏览器本地打开即可。

目前发现的一个问题就是应用了RevealJS后叠加的tooltip (tooltip shared: true) 显示位置就会出错。。