javascript - 如何设置与选择选项交互的 Highcharts

Question

我想让我的 Highcharts 数字随着选择选项而改变。例如，我选择北而不是渲染部分数据，如果我选择东，则渲染数据的其他部分。这是我在 jsfiddle 中的代码。任何帮助将不胜感激。

Answer 1

您只需将 onchange 事件绑定(bind)到 select 元素并调用一个将更新图表的函数，例如:onchange="updateChart(this.value)"

请参阅下面的工作示例:

/*test the interactive of select and highcharts rendering*/

//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},
    {y:6, prop:21},
    {y:6, prop:21},
    {y:6, prop:21},
    {y:6, prop:21},
    {y:6, prop:21},
    {y:6, prop:21},
    {y:6, prop:21},
    {y:6, prop:21},
    {y:6, prop:21},
    {y:6, prop:21},
    {y:6, prop:21},
    {y:6, prop:21},
    {y:11, prop:38},
    {y:17, prop:59},
    {y:25, prop:86},
    {y:29, prop:100},
    {y:29, prop:100},
    {y:29, prop:100},
    {y:29, prop:100},
    {y:29, prop:100},
    {y:29, prop:100}
]; 

//FF
var data6 = [  
		{y:0, prop:0},
    {y:2, prop:8},
    {y:6, prop:23},
    {y:6, prop:23},
    {y:6, prop:23},
    {y:6, prop:23},
    {y:8, prop:31},
    {y:11, prop:42},
    {y:14, prop:54},
    {y:14, prop:54},
    {y:15, prop:58},
    {y:20, prop:77},
    {y:20, prop:77},
    {y:22, prop:85},
    {y:22, prop:85},
    {y:23, prop:88},
    {y:26, prop:100},
    {y:26, prop:100},
    {y:26, prop:100},
    {y:26, prop:100},
    {y:26, prop:100},
    {y:26, prop:100}
];

//GG
var data7 = [  
		{y:0, prop:0},
    {y:6, prop:33},
    {y:6, prop:33},
    {y:6, prop:33},
    {y:6, prop:33},
    {y:6, prop:33},
    {y:10, prop:56},
    {y:16, prop:89},
    {y:16, prop:89},
    {y:16, prop:89},
    {y:16, prop:89},
    {y:16, prop:89},
    {y:16, prop:89},
    {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}
];

var series = [{
        name: 'AA',
        data: data1
    }, {
        name: 'BB',
        data: data2
    }, {
        name: 'CC',
        data: data3
    }, {
        name: 'DD',
        data: data4
    }, {
        name: 'EE',
        data: data5
    }, {
        name: 'FF',
        data: data6
    }, {
        name: 'GG',
        data: data7
}];

var chartOptions = {
		chart:{zoomType: 'xy'},
    
    title: {
        text: 'test the interactive of select option and highcharts'
    },

    subtitle: {
        text: ''
    },
    
    xAxis: {
    		crosshair: { 
        width: 2,
        color: 'black',
        dashStyle: 'Solid'
        },
        categories: ['2015/12/7','2015/12/14','2015/12/21','2015/12/28','2016/1/4','2016/1/11','2016/1/18','2016/1/25','2016/2/1','2016/2/8','2016/2/15','2016/2/22','2016/2/29','2016/3/7','2016/3/14','2016/3/21','2016/3/28','2016/4/4','2016/4/11','2016/4/18','2016/4/25','2016/5/2']
    },

    yAxis: {
        title: {
            text: 'number of finished' 
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },
    
    tooltip: { 
            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> (finished{point.prop}%)<br/>',
            valueDecimals: 0,
            split: true,
            valueSuffix: ' number'
        }
};

window.updateChart = function(selection) {
  if (selection == "") {
	  chartOptions.series = series;
  } else if (selection == "north") {
    chartOptions.series = [series[0],series[1],series[2],series[3]];
  } else if (selection == "east") {
    chartOptions.series = [series[4],series[5],series[6]];
  }

  Highcharts.chart('container', chartOptions);
}

//start rendering----------------------------------------------
updateChart("");

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

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

Please select the location:
<select name='location' onchange="updateChart(this.value)">
  <option value= "" selected value="">Select</option>
  <option value="north">north</option>
  <option value="east">east</option>
</select>
<br><br>

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