HTML演示+交互图表

HTML演示+交互图表

用RevealJS制作html幻灯片,用HighCharts做数据可视化。

(标题图片来源: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基本框架

<!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库

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

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

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

数据结构(以带误差线的柱状图为例)

<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: 'http://zhiganglu.com',
      }
    });
});
</script>

效果如下:

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

Z. Lu avatar
Z. Lu
Data scientist, bioinformatician, retro fan and web lover.
comments powered by Disqus