我是编码新手，在创建一个同时加载两个 Highcharts 的下拉列表时遇到问题。
我尝试更改选项名称以避免重复，并合并两个列表更改值事件，因此这两个更改都是在单个函数中进行的。
[Here is my jsfiddle][1]
<http://jsfiddle.net/hirschle/unwb4wvg/1/>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<select id="list" name="list" multiple="multiple">
<option value="A">Gender</option>
<option value="B">Race</option>
<option value="C">Earnings</option>
</select>
<div>
<div id="container" class="container" style="height: 600px"></div>
<div id="container2" class="container" style="height: 600px"></div>
</div>
您能看一下我的 fiddle 并进行更新或提出解决方案吗？非常感谢!
[1]: http://jsfiddle.net/hirschle/unwb4wvg/1/
最佳答案
这是解决方案:jsfiddle
var chart=new Highcharts.Chart(options);
$('#container').append(chart);
var chart1=new Highcharts.Chart(options1);
$('#container2').append(chart1);
此外，代码片段显示了结果。
$(function() {
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'column',
type: 'column',
margin: 75,
options3d: {
enabled: false,
alpha: 8,
beta: 7,
depth: 2000
}
},
plotOptions: {
area: {
stacking: 'normal',
marker: {
symbol: 'circle',
radius: 1,
states: {
hover: {
enabled: true
}
}
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: 10,
y: 50,
floating: false,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
title: {
text: 'Average Age at Death by Gender, Race, and Birth Cohort'
},
xAxis: {
categories: ['1980-89', '1990-99', '2000-09', '2010-19', '2020-29', '2030-2039'],
labels: {
rotation: -45,
style: {
fontSize: '15px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
title: {
text: 'Average Age at Death',
fontSize: '15px',
},
labels: {
style: {
fontSize: '15px'
}
}
},
series: []
}
var options1 = {
chart: {
renderTo: 'container2',
defaultSeriesType: 'column',
type: 'column',
margin: 75,
options3d: {
enabled: false,
alpha: 8,
beta: 7,
depth: 2000
}
},
plotOptions: {
area: {
stacking: 'normal',
marker: {
symbol: 'circle',
radius: 1,
states: {
hover: {
enabled: true
}
}
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: 10,
y: 50,
floating: false,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
title: {
text: 'Average Age at Death by Gender, Race, and Birth Cohort'
},
xAxis: {
categories: ['1980-89', '1990-99', '2000-09', '2010-19', '2020-29', '2030-2039'],
labels: {
rotation: -45,
style: {
fontSize: '15px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
title: {
text: 'Average Age at Death',
fontSize: '15px',
},
labels: {
style: {
fontSize: '15px'
}
}
},
series: []
}
$("#list").on('change', function() {
var selVal = $("#list").val();
if (selVal == "A") {
options.series = [{
name: 'Male',
data: [5,6,7,8,9,10],
}]
options1.series = [{
name: 'Female',
data: [5,6,7,8,9,10],
}]
} else if (selVal == "B") {
options.series = [{
name: 'White',
data: [5,6,7,8,9,10],
}, {
name: 'Black',
data: [5,6,7,8,9,10],
}, {
name: 'Hispanic',
data: [5,6,7,8,9,10],
}, {
name: 'Asian',
data: [5,6,7,8,9,10],
}, {
name: 'Other',
data: [5,6,7,8,9,10],
}]
options1.series = [{
name: 'White',
data: [5,6,7,8,9,10],
}, {
name: 'Black',
data: [5,6,7,8,9,10],
}, {
name: 'Hispanic',
data: [5,6,7,8,9,10],
}, {
name: 'Asian',
data: [5,6,7,8,9,10],
}, {
name: 'Other',
data: [5,6,7,8,9,10],
}]
} else if (selVal == "C") {
options.series = [{
name: 'Ern<Med',
data: [5,6,7,8,9,10],
}]
options1.series = [{
name: 'Ern>=Med',
data: [5,6,7,8,9,10],
}]
} else if (selVal == "A,B") {
options.series = [{
name: 'White Male',
data: [5,6,7,8,9,10],
}, {
name: 'Black Male',
data: [5,6,7,8,9,10],
}, {
name: 'Hispanic Male',
data: [5,6,7,8,9,10],
}, {
name: 'Asian Male',
data: [5,6,7,8,9,10],
}, {
name: 'Other Male',
data: [5,6,7,8,9,10],
}]
options1.series = [{
name: 'White Female',
data: [0,0,2,2,100,120],
}, {
name: 'Black Female',
data: [5,6,7,8,9,10],
}, {
name: 'Hispanic Female',
data: [5,6,7,8,9,10],
}, {
name: 'Asian Female',
data: [5,6,7,8,9,10],
}, {
name: 'Other Female',
data: [5,6,7,8,9,10],
}]
} else if (selVal == "A,C") {
options.series = [{
name: 'Male Ern<Med',
data: [5,6,7,8,9,10],
}, {
name: 'Male Ern>=Med',
data: [5,6,7,8,9,10],
}]
options1.series = [{
name: 'Female Ern<Med',
data: [5,6,7,8,9,10],
}, {
name: 'Female Ern>=Med',
data: [5,6,7,8,9,10],
}]
} else if (selVal == "B,C") {
options.series = [{
name: 'White, Ern<Med',
data: [5,6,7,8,9,10],
}, {
name: 'Black Ern<Med',
data: [5,6,7,8,9,10],
}, {
name: 'Hispanic Ern<Med',
data: [5,6,7,8,9,10],
}, {
name: 'Asian Ern<Med',
data: [5,6,7,8,9,10],
}, {
name: 'Other Ern<Med',
data: [5,6,7,8,9,10],
}]
options1.series = [{
name: 'White, Ern>=Med',
data: [5,6,7,8,9,10],
}, {
name: 'Black Ern>=Med',
data: [5,6,7,8,9,10],
}, {
name: 'Hispanic Ern>=Med',
data: [5,6,7,8,9,10],
}, {
name: 'Asian Ern>=Med',
data: [5,6,7,8,9,10],
}, {
name: 'Other Ern>=Med',
data: [5,6,7,8,9,10],
}]
} else if (selVal == "A,B,C") {
options.series = [{
name: 'White Male Ern<Med',
data: [5,6,7,8,9,10],
}, {
name: 'White Male Ern>=Med',
data: [5,6,7,8,9,10],
}, {
name: 'Black Male Ern<Med',
data: [5,6,7,8,9,10],
}, {
name: 'Black Male Ern>=Med',
data: [5,6,7,8,9,10],
}, {
name: 'Hispanic Male Ern<Med',
data: [5,6,7,8,9,10],
}, {
name: 'Hispanic Male Ern>=Med',
data: [5,6,7,8,9,10],
}, {
name: 'Asian Male Ern<Med',
data: [5,6,7,8,9,10],
}, {
name: 'Asian Male Ern>=Med',
data: [5,6,7,8,9,10],
}, {
name: 'Other Male Ern<Med',
data: [5,6,7,8,9,10],
}, {
name: 'Other Male Ern>=Med',
data: [5,6,7,8,9,10],
}]
options1.series = [{
name: 'White Female Ern<Med',
data: [5,6,7,8,9,10],
}, {
name: 'White Female Ern>=Med',
data: [5,6,7,8,9,10],
}, {
name: 'Black Female Ern<Med',
data: [5,6,7,8,9,10],
}, {
name: 'Black Female Ern>=Med',
data: [5,6,7,8,9,10],
}, {
name: 'Hispanic Female Ern<Med',
data: [5,6,7,8,9,10],
}, {
name: 'Hispanic Female Ern>=Med',
data: [5,6,7,8,9,10],
}, {
name: 'Asian Female Ern<Med',
data: [5,6,7,8,9,10],
}, {
name: 'Asian Female Ern>=Med',
data: [5,6,7,8,9,10],
}, {
name: 'Female Other Ern<Med',
data: [5,6,7,8,9,10],
}, {
name: 'Female Other Ern>=Med',
data: [5,6,7,8,9,10],
}]
}
var chart=new Highcharts.Chart(options);
$('#container').append(chart);
var chart1=new Highcharts.Chart(options1);
$('#container2').append(chart1);
});
});.container {
display: inline-block;
height: 500px;
width: 500px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<select id="list" name="list" multiple="multiple">
<option value="A">Gender</option>
<option value="B">Race</option>
<option value="C">Earnings</option>
</select>
<div>
<div id="container" class="container" style="height: 600px"></div>
<div id="container2" class="container" style="height: 600px"></div>
</div>关于javascript - 如何使用一个下拉菜单更新两个 Highcharts ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40685393/