我最初想在我的网站上以并排配置方式显示大量高图表。现在，我一直尝试在网站上仅包含一个高图表，并为观众提供使用按钮在它们之间切换的选项。我在这方面完全是新手，所以我在做这件事时遇到了一些问题。我一直在尝试使用以下小提琴：http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/members/series-setdata/ http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/members/series-setdata/
-> 但是这个例子和我的设置之间有一些差异，我遇到了麻烦。
我使用网上找到的一些 JSON 模板从数据库填充我的 highcharts（由于图表太多，我将所有代码保存在单独的 data.php 文件中）。一切正常。
这是我想要做的一个例子 - 我在下面的代码中插入了两个高图表，但还会有更多。每个图表都有不同的工具提示和 y 轴选项等，因此我认为仅更改数据本身是行不通的。
<!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>
到目前为止的进展：
我尝试删除该 div 并使用下面的代码创建一个新的。这会导致删除“chart1”，但不会创建“chart2”。另外 - 事实上大约有 10 个图表需要创建，所以我想知道是否有人能想出一种方法，让 10 个按钮中的每一个都始终删除上面的当前图表，而是创建专用于该特定按钮的图表？
<script>
$('#button').on('click',function(){
var elem = document.getElementById("chart1");
elem.remove();
var div = document.createElement('div');
div.id = "chart2";
});
</script>
如果您能为我提供解释如何执行此操作或如何更好地理解整个事情的链接，我也非常高兴。我非常确定这必须使用 javascript 或 ajax 来完成，但我使用这些的经验很少，所以我只需要一点灵感。
预先非常感谢！
