訊息推送數統計

by kikkoma

HTML

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

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

CSS

.highcharts-title {
    fill: #434348;
    font-weight: bold;
    letter-spacing: 0.3em;
    font-size: 3em;
    font-family:'微軟正黑體';
}

.highcharts-subtitle {
   font-family:'微軟正黑體';

}
.highcharts-color-0{
  
  
}

JavaScript

Highcharts.setOptions({
		lang: {
			thousandsSep: ','
		}
	});

Highcharts.setOptions({
    colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});

// Create the chart
Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: '訊息推送數統計',
    style: {
            color: '#000000',
            fontWeight: 'bold',
            fontfamily:'微軟正黑體'
        }
  },
  subtitle: {
    text: '統計區間 2018/5/20 ~ 2018/5/25'
  },
  xAxis: {
    type: 'category',
    categories: [
                '2018/5/20',
                '2018/5/21',
                '2018/5/22',
                '2018/5/23',
                '2018/5/24',
                '2018/5/25'
            ],
  },
  yAxis: {
    title: {
      text: '推送次數'
    },
    className: 'highcharts-color-0'

  },
    legend: {
        enabled: true
    },
    plotOptions: {
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: true,
                format: '{point.y:,.0f}'
            }
        }
    },

    tooltip: {
        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
    },
series: [{
            name: '颱風',
            data: [27000, 26033, 0, 0, 0, 0]

        }, {
            name: '降雨',
            data: [13441, 17241, 26441, 20141, 10697, 5870]

        }, {
            name: '淹水',
            data: [6874, 9874, 19654, 19875, 9871, 9654]

        }, {
            name: '水庫放流',
            data: [0, 4512, 9854, 17211, 6511, 0]

        }]
    
});