html按钮未将事件触发到所需的图形容器，并将其触发到Highchart JS中的不同图形

Question

我在两个不同的div(container1，container2(中有两个图，并且有两组按钮。两组按钮都只触发图形2。当我单击图形1的按钮时，它应该更改图形1，当我单击图2按钮时，应该更改图形2。但是图形1和图形2按钮都仅触发图形2。

JS fiddle代码http://jsfiddle.net/h5t4c8hj/7/

代码

var chart = Highcharts.chart('container', {
title: {
text: 'Graph 1'
},
subtitle: {
text: 'plain'
},
xAxis: {
categories: ['Bin1s', 'Bin2', 'Bin3', 'Bin4', 'Bin5', 'Bin6', 'Bin7', 'Bin8', 'Bin9', 'Bin10']
},
series: [{
type: 'column',
colorByPoint: false,
data: [22.3, 42.3, 96.4, 29.2, 44.0, 76.0, 35.6, 48.5, 16.4, 92.3],
showInLegend: false
}],
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
}, function(chart) {
$.each(chart.series[0].data, function (i, data) {
if (data.y >= 70)
data.update({
color: 'yellow'
});
if (data.y >= 90)
data.update({
color: 'red'
});
})
});
$('#plain').click(function() {
chart.update({
chart: {
inverted: false,
polar: false
},
subtitle: {
text: 'Plain'
}
});
});
$('#inverted').click(function() {
chart.update({
chart: {
inverted: true,
polar: false
},
subtitle: {
text: 'inverted'
}
});
});
$('#polar').click(function() {
chart.update({
chart: {
inverted: false,
polar: true
},
subtitle: {
text: 'Polar'
}
});
});
var chart = Highcharts.chart('container1', {
title: {
text: 'Graph 2'
},
subtitle: {
text: 'Filled %'
},
xAxis: {
categories: ['id-1', 'id-2', 'id-3', 'id-4', 'id-5']
},
series: [{
type: 'column',
colorByPoint: false,
data: [42.4, 71.5, 19.4, 29.2, 44.0],
showInLegend: false
}],
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
},
function (chart) {
$.each(chart.series[0].data, function (i, data) {
if (data.y >= 70)
data.update({
color: 'yellow'
});
if (data.y >= 90)
data.update({
color: 'red'
});
})
});
//code for color change

$('#plain1').click(function () {
chart.update({
chart: {
inverted: false,
polar: false
},
subtitle: {
text: 'Sewage'
}
});
});
$('#inverted1').click(function () {
chart.update({
chart: {
inverted: true,
polar: false
},
subtitle: {
text: 'Inverted'
}
});
});
$('#polar1').click(function () {
chart.update({
chart: {
inverted: false,
polar: true
},
subtitle: {
text: 'Polar'
}
});
});

Answer 1

您已经用相同的名称命名了这两个字符
您必须使用chart1作为第二个字符，并在更新中引用它

var chart1 = Highcharts.chart('container1', {
title: {
text: 'Graph 2'
},
subtitle: {
text: 'Filled %'
},
xAxis: {
categories: ['id-1', 'id-2', 'id-3', 'id-4', 'id-5']
},
series: [{
type: 'column',
colorByPoint: false,
data: [42.4, 71.5, 19.4, 29.2, 44.0],
showInLegend: false
}],
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
},
function (chart) {
$.each(chart.series[0].data, function (i, data) {
if (data.y >= 70)
data.update({
color: 'yellow'
});
if (data.y >= 90)
data.update({
color: 'red'
});
})
});
//code for color change

$('#plain1').click(function () {
chart1.update({
chart: {
inverted: false,
polar: false
},
subtitle: {
text: 'Sewage'
}
});
});
$('#inverted1').click(function () {
chart1.update({
chart: {
inverted: true,
polar: false
},
subtitle: {
text: 'Inverted'
}
});
});
$('#polar1').click(function () {
chart1.update({
chart: {
inverted: false,
polar: true
},
subtitle: {
text: 'Polar'
}
});
});

http://jsfiddle.net/6h9o5m2w/

Answer 2

这是因为它们有相同的变量名。考虑将它们正确命名为

// first chart
var chart1 = Highcharts.chart('container'
// second chart
var chart2 = Highcharts.chart('container1'

然后使用它们各自的变量触发您想要的事件

希望能帮助

Answer 3

您在同一变量chart上声明了两个图表。因此，最新声明的图表将覆盖第一个图表。因此：

var chart = Highcharts.chart('container', {
title: {
text: 'Graph 1'
}
...
});
var chart = Highcharts.chart('container1', {
title: {
text: 'Graph 2'
}
...
});

成为：

var chart = Highcharts.chart('container', {
title: {
text: 'Graph 1'
}
...
});
var chart1 = Highcharts.chart('container1', {
title: {
text: 'Graph 2'
}
...
});

您还在每个click事件上针对相同的变量：

$('#polar').click(function() {
chart.update({
...
});
});
$('#polar1').click(function() {
chart.update({
...
});
});

成为：

$('#polar').click(function() {
chart.update({
...
});
});
$('#polar1').click(function() {
chart1.update({
...
});
});

这是你的工作小提琴