如何将图表更新为空数据数组以显示还没有数据,然后返回到有数据的图表,而不操作 javascript 对象?当选择的数据数组为空时,出现错误。
我做了一个code sample here 。单击 2015 年、2016 年或 2017 年......没问题!但是,如果我点击空白的 2018 年,它会影响其他应该是静态数据的年份。
模拟错误:
- 加载后,选择 2018:不显示可按预期显示的数据
- 选择 2017 年:按预期显示 2017 年数据
- 选择 2016 年:按预期显示 2016 年数据
- 选择 2017 年:显示 2016 年数据,而不是显示 2017 年数据。 JS 变量 trafficinfo_data_series_2017 更新为 2016 年数据。
var trafficinfo_data_xaxis_default = [
["North America"],["European Union"],
["Asia Pacific"],
["Australia"],["Africa"]
];
var trafficinfo_data_series_default = [{
"name": "American Brands",
"data": [
[57.37533669],
[0.117136],
[0.08759559],
[0.692],
[0.35]
],
"stack": "cars"
}, {
"name": "European Brands",
"data": [
[23.92798527],
[57.37533669],
[12.541969060000001],
[14.24307465],
[11.84693269]
],
"stack": "cars"
}, {
"name": "Japanese Brands",
"data": [
[0.59301429],
[3],
[32.95988396],
[12.158916],
[0.01123203],
],
"stack": "cars"
}];
$(function() {
$('#trafficinfo').highcharts({
colors: ['#cbddad', '#fac58e', '#a0ddea'],
chart: {
type: 'bar',
height: 300,
style: {
fontFamily: 'Roboto'
}
},
xAxis: {
categories: trafficinfo_data_xaxis_default,
title: {
text: 0
}
},
yAxis: {
title: {
text: 'Amount (USD Millions)',
align: 'high'
},
labels: {
overflow: 'justify'
},
stackLabels: {
enabled: true,
formatter: function() {
return Highcharts.numberFormat((this.total), 2, '.');
}
}
},
title: {
text: 'Year 2017'
},
tooltip: {
backgroundColor: {
linearGradient: [0, 0, 0, 60],
stops: [
[0, '#FFFFFF'],
[1, '#E0E0E0']
]
},
borderWidth: 1,
borderColor: '#AAA',
headerFormat: '<span style="font-size:12px; font-weight:700; text-decoration:underline">{point.key}</span><table>',
pointFormatter: function() {
return '<tr><td><i class="fa fa-circle" style="color:' + this.series.color + '"></i> ' + this.series.name + ':</td>' + '<td style="text-align:right; padding:0; font-weight:700;">' + Highcharts.numberFormat((this.y), 2, '.') + ' million</td></tr>';
},
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
bar: {
stacking: 'normal'
},
series: {
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
},
dataLabels: {
enabled: false,
format: '{point.y:,.2f}',
style: {
color: 'black',
fontWeight: 'normal'
}
}
}
},
credits: {
enabled: false
},
series: trafficinfo_data_series_default
});
});
var trafficinfo_data_xaxis_2015 = [
["North America"],
["European Union"],
["Asia Pacific"],
["Australia"],
["Africa"]
];
var trafficinfo_data_series_2015 = [{
"name": "American Brands",
"data": [
[41.37533669],
[0.557136],
[1.88759559],
[0.092],
[3.234]
],
"stack": "cars"
}, {
"name": "European Brands",
"data": [
[18.92798527],
[37.37533669],
[10.541969060000001],
[8.24307465],
[7.84693269]
],
"stack": "cars"
}, {
"name": "Japanese Brands",
"data": [
[2.59301429],
[4.74857],
[18.95988396],
[6.158916],
[2.01123203],
],
"stack": "cars"
}];
var trafficinfo_data_xaxis_2016 = [
["North America"],
["European Union"],
["Asia Pacific"],
["Australia"],
["Africa"]
];
var trafficinfo_data_series_2016 = [{
"name": "American Brands",
"data": [
[47.92798527],
[1.95988396],
[1.38759559],
[0.95492],
[2.35]
],
"stack": "cars"
}, {
"name": "European Brands",
"data": [
[18.24307465],
[47.37533669],
[14.841969060000001],
[9.64307465],
[15.84693269]
],
"stack": "cars"
}, {
"name": "Japanese Brands",
"data": [
[2.95988396],
[4.31048141],
[35.95988396],
[14.158916],
[2.01123203],
],
"stack": "cars"
}];
var trafficinfo_data_xaxis_2017 = [
["North America"],
["European Union"],
["Asia Pacific"],
["Australia"],
["Africa"]
];
var trafficinfo_data_series_2017 = [{
"name": "American Brands",
"data": [
[57.37533669],
[0.117136],
[0.08759559],
[0.692],
[0.35]
],
"stack": "cars"
}, {
"name": "European Brands",
"data": [
[23.92798527],
[57.37533669],
[12.541969060000001],
[14.24307465],
[11.84693269]
],
"stack": "cars"
}, {
"name": "Japanese Brands",
"data": [
[0.59301429],
[3],
[32.95988396],
[12.158916],
[0.01123203],
],
"stack": "cars"
}];
var trafficinfo_data_xaxis_2018 = [];
var trafficinfo_data_series_2018 = [{
"name": "American Brands",
"data": [],
"stack": "cars"
}, {
"name": "European Brands",
"data": [],
"stack": "cars"
}, {
"name": "Japanese Brands",
"data": [],
"stack": "cars"
}];
$(document).ready(function() {
$('.years input[type=radio]').on('change', function() {
var selected_year = this.value;
var chart = $('#trafficinfo').highcharts();
for (var i = 0; i < eval('trafficinfo_data_series_' + selected_year).length; i++) {
chart.series[i].setData(eval('trafficinfo_data_series_' + selected_year)[i].data);
}
chart.xAxis[0].setCategories(eval('trafficinfo_data_xaxis_' + selected_year));
chart.setTitle({
text: "Year " + selected_year
});
});
});
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/no-data-to-display.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
</head>
<body>
<div class="btn-group years" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" value="2015" autocomplete="off"> 2015
</label>
<label class="btn btn-primary">
<input type="radio" name="options" value="2016" autocomplete="off"> 2016
</label>
<label class="btn btn-primary active">
<input type="radio" name="options" value="2017" autocomplete="off" checked="checked"> 2017
</label>
<label class="btn btn-primary">
<input type="radio" name="options" value="2018" autocomplete="off"> 2018
</label>
</div>
<div id="trafficinfo" style="min-width: 310px; height: 200px; margin: 0 auto"></div>
</body>
</html>
最佳答案
此问题与 javascript 对象引用有关。这是already reported并解析为正确的行为。如果您想多次设置数据,请使用 $.expand
。
还有avoid using eval
只要有可能。
$(function() {
$('#trafficinfo').highcharts({
colors: ['#cbddad', '#fac58e', '#a0ddea'],
chart: {
type: 'bar',
height: 300,
style: {
fontFamily: 'Roboto'
}
},
xAxis: {
categories: trafficinfo_data.default.xaxis,
title: {
text: 0
}
},
yAxis: {
title: {
text: 'Amount (USD Millions)',
align: 'high'
},
labels: {
overflow: 'justify'
},
stackLabels: {
enabled: true,
formatter: function() {
return Highcharts.numberFormat((this.total), 2, '.');
}
}
},
title: {
text: 'Year 2017'
},
tooltip: {
backgroundColor: {
linearGradient: [0, 0, 0, 60],
stops: [
[0, '#FFFFFF'],
[1, '#E0E0E0']
]
},
borderWidth: 1,
borderColor: '#AAA',
headerFormat: '<span style="font-size:12px; font-weight:700; text-decoration:underline">{point.key}</span><table>',
pointFormatter: function() {
return '<tr><td><i class="fa fa-circle" style="color:' + this.series.color + '"></i> ' + this.series.name + ':</td>' + '<td style="text-align:right; padding:0; font-weight:700;">' + Highcharts.numberFormat((this.y), 2, '.') + ' million</td></tr>';
},
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
bar: {
stacking: 'normal'
},
series: {
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
},
dataLabels: {
enabled: false,
format: '{point.y:,.2f}',
style: {
color: 'black',
fontWeight: 'normal'
}
}
}
},
credits: {
enabled: false
},
series: $.extend(true, [], trafficinfo_data.default.series)
});
});
$(document).ready(function() {
$('.years input[type=radio]').on('change', function() {
var selected_year = this.value;
var chart = $('#trafficinfo').highcharts();
trafficinfo_data[selected_year].series.forEach(function(serie, index) {
chart.series[index].setData($.extend(true, [], serie.data));
});
chart.xAxis[0].setCategories(trafficinfo_data[selected_year].xaxis);
chart.setTitle({
text: "Year " + selected_year
});
});
});
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/no-data-to-display.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
</head>
<body>
<script>
var trafficinfo_data = {
default: {
xaxis: [
["North America"],["European Union"],
["Asia Pacific"],
["Australia"],["Africa"]
],
series: [{
"name": "American Brands",
"data": [
[57.37533669],
[0.117136],
[0.08759559],
[0.692],
[0.35]
],
"stack": "cars"
}, {
"name": "European Brands",
"data": [
[23.92798527],
[57.37533669],
[12.541969060000001],
[14.24307465],
[11.84693269]
],
"stack": "cars"
}, {
"name": "Japanese Brands",
"data": [
[0.59301429],
[3],
[32.95988396],
[12.158916],
[0.01123203],
],
"stack": "cars"
}]
},
2015: {
xaxis: [
["North America"],
["European Union"],
["Asia Pacific"],
["Australia"],
["Africa"]
],
series: [{
"name": "American Brands",
"data": [
[41.37533669],
[0.557136],
[1.88759559],
[0.092],
[3.234]
],
"stack": "cars"
}, {
"name": "European Brands",
"data": [
[18.92798527],
[37.37533669],
[10.541969060000001],
[8.24307465],
[7.84693269]
],
"stack": "cars"
}, {
"name": "Japanese Brands",
"data": [
[2.59301429],
[4.74857],
[18.95988396],
[6.158916],
[2.01123203],
],
"stack": "cars"
}]
},
2016: {
xaxis: [
["North America"],
["European Union"],
["Asia Pacific"],
["Australia"],
["Africa"]
],
series: [{
"name": "American Brands",
"data": [
[47.92798527],
[1.95988396],
[1.38759559],
[0.95492],
[2.35]
],
"stack": "cars"
}, {
"name": "European Brands",
"data": [
[18.24307465],
[47.37533669],
[14.841969060000001],
[9.64307465],
[15.84693269]
],
"stack": "cars"
}, {
"name": "Japanese Brands",
"data": [
[2.95988396],
[4.31048141],
[35.95988396],
[14.158916],
[2.01123203],
],
"stack": "cars"
}]
},
2017: {
xaxis: [
["North America"],
["European Union"],
["Asia Pacific"],
["Australia"],
["Africa"]
],
series: [{
"name": "American Brands",
"data": [
[57.37533669],
[0.117136],
[0.08759559],
[0.692],
[0.35]
],
"stack": "cars"
}, {
"name": "European Brands",
"data": [
[23.92798527],
[57.37533669],
[12.541969060000001],
[14.24307465],
[11.84693269]
],
"stack": "cars"
}, {
"name": "Japanese Brands",
"data": [
[0.59301429],
[3],
[32.95988396],
[12.158916],
[0.01123203],
],
"stack": "cars"
}]
},
2018: {
xaxis: [],
series: [{
"name": "American Brands",
"data": [],
"stack": "cars"
}, {
"name": "European Brands",
"data": [],
"stack": "cars"
}, {
"name": "Japanese Brands",
"data": [],
"stack": "cars"
}]
},
}
</script>
<div class="btn-group years" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" value="2015" autocomplete="off"> 2015
</label>
<label class="btn btn-primary">
<input type="radio" name="options" value="2016" autocomplete="off"> 2016
</label>
<label class="btn btn-primary active">
<input type="radio" name="options" value="2017" autocomplete="off" checked="checked"> 2017
</label>
<label class="btn btn-primary">
<input type="radio" name="options" value="2018" autocomplete="off"> 2018
</label>
</div>
<div id="trafficinfo" style="min-width: 310px; height: 200px; margin: 0 auto"></div>
</body>
</html>
关于javascript - 将空数组绑定(bind)到图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48701071/