Highcharts Demo1

author(s): Torstein Hønsi

by Yoghurts

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: '页面异常统计概况'
  },
  subtitle: {
    text: '3月21日 - 4月5日 / index.htm'
  },
  xAxis: {
    categories: [
      '3月21',
      '3月22',
      '3月23',
      '3月24',
      '3月25',
      '3月26',
      '3月27',
      '3月28',
      '3月29',
      '3月30',
      '3月31',
      '4月1',
      '4月2',
      '4月3',
      '4月4',
      '4月5'
    ],
    crosshair: true
  },
  yAxis: {
    min: 0,
    title: {
      text: '异常发生次数'
    }
  },
  tooltip: {
    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
      '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
    footerFormat: '</table>',
    shared: true,
    useHTML: true
  },
  plotOptions: {
    column: {
      pointPadding: 0.2,
      borderWidth: 0
    }
  },
  series: [{
    name: '页面差异对比异常',
    data: [0, 1, 2, 0, 3, 3, 0, 20, 0, 12, 0, 0, 0, 0, 1, 1]

  }, {
    name: 'DOM 检测异常',
    data: [2, 4, 0, 0, 4, 1, 3, 5, 0, 0, 0, 3, 0, 1, 0, 0]

  }]
});