问题
I originally wanted to display a lot of highcharts on my website in a side-by-side sort of configuration. Now I have instead been trying to include just one highchart on the site and give the viewers the option to switch between them using buttons. I am a total novice at this so I am having a few problems doing this. I have been trying to use the following fiddle: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/members/series-setdata/
-> but theres a few differences between this example and my setup which I am having troubles with.
I populate my highcharts from a database using some JSON template I found online (and since theres so many charts, I keep all that code in a separate data.php file). All works fine.
Heres an example of what I am trying to do - I have inserted two highcharts in the following code, but theres going to be a lot more. Each of the charts have different tooltip and y-axis options etc. so I don't think it will work to just change the data itself.
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
$('chart1').ready(function() {
var options = {
chart: {
renderTo: 'chart1',
type: 'column',
marginTop: 40,
marginBottom: 75
},
legend: {
enabled: false
},
title: {
text: 'Revenues',
x: 25 //center
},
xAxis: {
title: {
text: ''
},
categories: []
},
yAxis: {
showInLegend: false,
tickAmount: 11,
endOnTick: false,
startOnTick: true,
labels: {
formatter: function () {
return Highcharts.numberFormat(this.value, 0, '.', ',');
}
},
title: {
text: '<?php echo $unitCurr; ?>'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ Highcharts.numberFormat(this.y, 0,'.',',');
}
},
series: []
}
var tableName = '<?php echo $tableName; ?>'
$.getJSON("../../companies/charts/data.php", {id: escape(tableName)}, function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
chart = new Highcharts.Chart(options);
});
});
$('chart2').ready(function() {
var options = {
chart: {
renderTo: 'chart2',
type: 'column',
marginTop: 40,
marginBottom: 75
},
legend: {
enabled: false
},
title: {
text: 'Net profit or loss',
x: 25 //center
},
xAxis: {
title: {
text: ''
},
categories: []
},
yAxis: {
showInLegend: false,
tickAmount: 11,
endOnTick: false,
startOnTick: true,
labels: {
formatter: function () {
return Highcharts.numberFormat(this.value, 0, '.', ',');
}
},
title: {
text: '<?php echo $unitCurr; ?>'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ Highcharts.numberFormat(this.y, 1,'.',',');
}
},
series: []
}
var tableName = '<?php echo $tableName; ?>'
$.getJSON("../../companies/charts/data.php", {id: escape(tableName)}, function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[6];
chart = new Highcharts.Chart(options);
});
});
</script>
</head>
<body>
<div id="chart1"></div>
<button id="button" class="autocompare">Set new data</button>
</body>
</html>
Progress so far:
I have tried to delete the div and creating a new one using the code below. This results in delete of the 'chart1' but does not create the 'chart2'. Also - There is in fact about 10 charts which has to be created so I am wondering if anyone can think of a way in which each of the 10 buttons would always delete the current chart above and instead create the chart dedicated to that specific button?
<script>
$('#button').on('click',function(){
var elem = document.getElementById("chart1");
elem.remove();
var div = document.createElement('div');
div.id = "chart2";
});
</script>
I'm also very happy if you could just provide me with links that explains how to do this or how to get a better understanding of the whole thing. I am very sure this has to be done using either javascript or ajax but I have so little experience using these so I just need a little inspiration.
Thanks a lot in advance!
回答1:
I would do it something like this - on button click, destroy the chart and build a new one in its place.
This example works on data and chart objects defined on the page, but you could instead, inside of this click event handler, fetch your external data, and your external chart options definition, based on the same key obtained from the clicked button.
$(document).on('click', '.chart-update', function() {
chart.destroy(); <-- destroys the current chart object
$('#container').highcharts(chartOptions[$(this).data('chartName')]); <-- rebuilds a new chart
chart = $('#container').highcharts(); <-- re-associates the 'chart' variable with the current chart object
});
Fiddle:
- http://jsfiddle.net/jlbriggs/7ntyzo6u/
来源：https://stackoverflow.com/questions/39891763/switching-between-many-highcharts-using-buttons-or-link-text