Javascript 如何设置与选择选项交互的highcharts

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

您只需将onchange事件绑定到select元素，并调用一个函数来更新图表，如：

onchange=“updateChart（this.value）”

请参见以下工作示例：

/*测试select和highcharts渲染的交互*/
//创建将使用的数据
//AA
变量数据1=[
{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，提案：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，提案：100}
]; 
//BB
变量数据2=[
{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，提案：39}，
{y:8，提案：44}，
{y:8，提案：44}，
{y:8，提案：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，提案：100}
];
//抄送
变量数据3=[
{y:0，prop:0}，
{y:7，prop:23}，
{y:8，提案：27}，
{y:8，提案：27}，
{y:8，提案：27}，
{y:8，提案：27}，
{y:13，prop:43}，
{y:19，prop:63}，
{y:20，提案：67}，
{y:20，提案：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，提案：15}，
{y:7，prop:21}，
{y:7，prop:21}，
{y:7，prop:21}，
{y:7，prop:21}，
{y:18，提案：55}，
{y:20，提案：61}，
{y:20，提案：61}，
{y:22，提案：67}，
{y:27，prop:82}，
{y:27，prop:82}，
{y:27，prop:82}，
{y:31，prop:94}，
{y:32，prop:97}，
{y:33，提案：100}，
{y:33，提案：100}，
{y:33，提案：100}，
{y:33，提案：100}，
{y:33，提案：100}，
{y:33，提案：100}，
{y:33，提案：100}
];
//EE
变量数据5=[
{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，提案：59}，
{y:25，提案：86}，
{y:29，prop:100}，
{y:29，prop:100}，
{y:29，prop:100}，
{y:29，prop:100}，
{y:29，prop:100}，
{y:29，提案：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，提案：77}，
{y:20，提案：77}，
{y:22，提案：85}，
{y:22，提案：85}，
{y:23，prop:88}，
{y:26，提案：100}，
{y:26，提案：100}，
{y:26，提案：100}，
{y:26，提案：100}，
{y:26，提案：100}，
{y:26，提案：100}
];
//GG
变量数据7=[
{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，提案：100}
];
变量系列=[{
名称：‘AA’，
数据：数据1
}, {
名称：“BB”，
数据：数据2
}, {
姓名：'CC'，
数据：数据3
}, {
姓名：‘DD’，
数据：数据4
}, {
名称：'EE'，
数据：数据5
}, {
名称：“FF”，
数据：数据6
}, {
名称：“GG”，
数据：数据7
}];
var图表选项={
图表：{zoomType:'xy'}，
标题：{
文本：“测试选择选项和highcharts的交互”
},
副标题:{
文本：“”
},
xAxis：{
十字线：{
宽度：2，
颜色：'黑色'，
dashStyle:“实心”
},
类别：['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/11'、'2016/4/2016/4'、'2016/4'、'2016/4'、'4/2016/25']
},
亚克斯：{
标题：{
文本：“完成的数量”
}
},
图例：{
布局：“垂直”，
对齐：“右”，
垂直排列：“中间”
},
工具提示：{
pointFormat:“{series.name}:{point.y}（完成的{point.prop}%）
”，
数值小数：0，
斯普利特：是的，
valueSuffix:'数字'
}
};
window.updateChart=函数（选择）{
如果（选择==“”）{
chartOptions.series=系列；
}else if（选择==“北”）{
chartOptions.series=[系列[0]，系列[1]，系列[2]，系列[3]；
}else if（选择==“东”）{
chartOptions.series=[series[4]、series[5]、series[6]；
}
Highcharts.chart（'容器'，chartOptions）；
}
//开始渲染----------------------------------------------
updateChart（“”）
#容器{
最小宽度：310px；
最大宽度：900px；
高度：600px；
保证金：0自动；
}

请选择位置：
选择
北
东



感谢您的帮助，您代码片段中的结果正是我想要的，非常感谢。日分