如何使用选择选项设置高图互动 [英] How to set the highcharts interactive with select option
本文介绍了如何使用选择选项设置高图互动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想让我的highcharts数字随着选择选项而改变。例如，我选择北比渲染部分数据，如果选择东部，则渲染我的数据的其他部分。这里是我的代码在 jsfiddle 。只需要将onchange事件绑定到select元素并调用一个将更新的函数如下图所示： onchange =updateChart（this.value）
p>
/ *测试select和highcharts渲染的交互效果* / //创建将使用的数据// AAvar 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，道具：28}，{y：7，道具：28}，{y：9，道具：36}，{y：10，道具：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：2 5，prop：100}，{y：25，prop：100}，{y：25，prop：100}]; // BBvar data2 = [{y：0，prop：0}，{y：5，prop：28}，{y：6，prop：33}，{y：6，prop：33}，{y：6 ，道具：33}，{y：6，道具：33}，{y：7，道具：39}，{y：8，道具：44}，{y：8，道具：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}]; // CCvar data3 = [{y：0，prop：0}，{y：7， {y：8，prop：27}，{y：8，prop：27}，{y：8，prop：27}，{y：8，prop：27} 43，{y：19，道具：63}，{y：20，道具：67}，{y：20，道具：67}，{y：21，道具：70}，{y：24， {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， 100}]; // DDvar 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}]; // EEvar data5 = [{y：0，prop：0}，{ y：6，道具：21}，{y：6，道具：21}，{y：6，道具：21}，{y：6，道具：21}，{ y：6，道具：21}，{y：6，道具：21}，{y：6，道具：21}，{y：6，道具：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}]; // FFvar data6 = {{y：0，prop：0}，{y：2，prop：8}，{y：6，prop：23}，{y：6，prop：23}，{y：6 ，道具：23}，{y：6，道具：23}，{y：8，道具：31}，{y：11，道具：42}，{y：14，道具：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}]; // GGvar data7 = [{y：0，prop：0}，{y：6，prop： {y：6，道具：33}，{y：6，道具：33}，{y：6，道具：33}，{y：6， 56：{y：16，prop：89}，{y：16，prop：89}，{y：16，prop：89}，{y：16，prop：89}，{y：16， {y：16，道具：89}，{y：16，道具：89}，{y：16，道具：89}，{y：16，道具：89} {y：18，prop：100}，{y：18，prop：100}，{y：18，prop：100}，{y：18，prop：100} 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：数据6}，{名称：'GG'，data：data7}]; var chartOptions = {chart：{zoomType：'xy'}，title：{text：'测试选择选项和highcharts的交互'}，副标题：{ text：''}，xAxis：{crosshair：{width：2，color：'black'，dashStyle：'Solid'}，类别：['2015/12/7'，'2015/12/14'，'2015 / 12 / 21' ， '2015年12月28日'， '2016年1月4日'， '2016年1月11日'， '2016年1月18日'， '2016年1月25日'，二分之二千○一十六/ 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：'完成的数量}}，图例：{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）;} //开始渲染--------------------------------- ------------- updateChart（）;
#container {min-width：310px;最大宽度：900px; height：600px; margin：0 auto;}
< script src = < / script>< / script&请选择位置：< select name ='location'onchange =updateChart（this.value）> < option value =selected value =>选择< / option> < option value =north> north< / option> < option value =east> east< / option>< / select>< br>< br>< div id =container>< / div>
I want to let my highcharts figure change with the select option. For example, I select north than rendering parts of my data, and if I select east, rendering other parts of my data. Here is my code in jsfiddle. Any help will be thankful.
解决方案
You just need to bind the onchange event to the select element and call a function that will update the chart like: onchange="updateChart(this.value)"
See below a working sample:
/*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>
这篇关于如何使用选择选项设置高图互动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
