Highcharts Demo

author(s): Torstein Hønsi

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'
  },
  yAxis: {
    title: {
      text: '人數'
    },
    className: 'highcharts-color-0'

  },
    legend: {
        enabled: false
    },
    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": "Browsers",
            "colorByPoint": true,
            "data": [
                {
                    "name": "5/20",
                    "y": 1000
                },
                {
                    "name": "5/21",
                    "y": 1033
                },
                {
                    "name": "5/22",
                    "y": 1511
                },
                {
                    "name": "5/23",
                    "y": 2377
                },
                {
                    "name": "5/24",
                    "y": 1422
                },
                {
                    "name": "5/25",
                    "y": 978
                }
            ]
        }
    ]
});