行政區統計

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: 700px; 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{
  font-family:'微軟正黑體';
  
}

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: '統計區間 2021/1/1 ~ 2021/1/31'
  },
  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": "排水圖框",
                    "y": 1201
                },
                {
                    "name": "海堤圖框",
                    "y": 312
                },
                {
                    "name": "海堤區域",
                    "y": 411
                },
                {
                    "name": "排水設施範圍",
                    "y": 987
                },
                {
                    "name": "河川區域線",
                    "y": 1571
                },
                {
                    "name": "河川圖框",
                    "y": 666
                }
            ]
        }
    ]
    
});