Highcharts Demo

author(s): Torstein Hønsi

by szuwei chen

HTML

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

請選擇分區：
<select name='location' >
  <option value= "" selected value="">select</option>
  <option value="north">north</option>
  <option value="east">east</option>
</select>
<br><br>

<div id="container"></div>

CSS

#container {
	min-width: 310px;
	max-width: 900px;
	height: 600px;
	margin: 0 auto;
}

JavaScript

//create the data that will use
//AA
var data1 = [  
		{y:0, prop:0},
    {y:3, prop:12},
    {y:5, prop:20},
    {y:5, prop:20},
    {y:5, prop:20},
    {y:5, prop:20},
    {y:7, prop:28},
    {y:7, prop:28},
    {y:7, prop:28},
    {y:7, prop:28},
    {y:7, prop:28},
    {y:9, prop:36},
    {y:10, prop:40},
    {y:13, prop:52},
    {y:13, prop:52},
    {y:25, prop:100},
    {y:25, prop:100},
    {y:25, prop:100},
    {y:25, prop:100},
    {y:25, prop:100},
    {y:25, prop:100},
    {y:25, prop:100}
]; 

//BB
var data2 = [  
		{y:0, prop:0},
    {y:5, prop:28},
    {y:6, prop:33},
    {y:6, prop:33},
    {y:6, prop:33},
    {y:6, prop:33},
    {y:7, prop:39},
    {y:8, prop:44},
    {y:8, prop:44},
    {y:8, prop:44},
    {y:9, prop:50},
    {y:10, prop:56},
    {y:10, prop:56},
    {y:16, prop:89},
    {y:16, prop:89},
    {y:16, prop:89},
    {y:18, prop:100},
    {y:18, prop:100},
    {y:18, prop:100},
    {y:18, prop:100},
    {y:18, prop:100},
    {y:18, prop:100}
];

//CC
var data3 = [  
		{y:0, prop:0},
    {y:7, prop:23},
    {y:8, prop:27},
    {y:8, prop:27},
    {y:8, prop:27},
    {y:8, prop:27},
    {y:13, prop:43},
    {y:19, prop:63},
    {y:20, prop:67},
    {y:20, prop:67},
    {y:21, prop:70},
    {y:24, prop:80},
    {y:29, prop:97},
    {y:29, prop:97},
    {y:29, prop:97},
    {y:30, prop:100},
    {y:30, prop:100},
    {y:30, prop:100},
    {y:30, prop:100},
    {y:30, prop:100},
    {y:30, prop:100},
    {y:30, prop:100}
];

//DD
var data4 = [  
		{y:0, prop:0},
    {y:5, prop:15},
    {y:7, prop:21},
    {y:7, prop:21},
    {y:7, prop:21},
    {y:7, prop:21},
    {y:18, prop:55},
    {y:20, prop:61},
    {y:20, prop:61},
    {y:22, prop:67},
    {y:27, prop:82},
    {y:27, prop:82},
    {y:27, prop:82},
    {y:31, prop:94},
    {y:32, prop:97},
    {y:33, prop:100},
    {y:33, prop:100},
    {y:33, prop:100},
    {y:33, prop:100},
    {y:33, prop:100},
    {y:33, prop:100},
    {y:33, prop:100}
];

//EE
var data5 = [  
		{y:0, prop:0},
  ...