【发布时间】：2016-10-06 08:58:04
【问题描述】：
我最初想在我的网站上以并排的配置显示大量的高图。现在，我一直试图在网站上只包含一个高图，并让观众可以选择使用按钮在它们之间切换。我在这方面完全是新手，所以我在做这件事时遇到了一些问题。我一直在尝试使用以下小提琴：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 来完成，但我使用这些的经验很少，所以我只需要一点灵感。
提前非常感谢！
【问题讨论】：
-
在图表呈现后更改包含元素的 id 不会做任何事情。我不会在任何时候更改 id，因为它根本没有必要。只需销毁旧图表，并在单击按钮时绘制新图表。或者，由于图表之间似乎唯一发生变化的是数据和标题，因此只需在单击按钮时更新数据和标题。
-
感谢您的留言 jlbriggs！我已经编辑了帖子并添加了一些代码，我尝试先删除 div，然后再创建另一个。这确实删除了“chart1”，但不会生成“chart2”。另外——实际上有大约 10 种不同的图表，所以我认为这是比更改标题、图例等更好的解决方案。但是，我知道我需要想出一个解决方案，以便脚本始终删除当前显示的图表而不是特定的图表。你有什么想法吗？ （不是我希望你为我创建代码）。谢谢。
-
没有必要（或不希望）删除 div 或更改其 ID - Highcharts 有一种方法可以销毁图表本身，然后您可以简单地在现有 div 中创建一个新图表，带有其现有 ID，带有新的图表选项。如果您要为每个图表设置不同的图表配置，我会 1）将该图表配置存储为与数据一起加载的文件（或将配置存储在从中获取数据的同一文件中） , 或 2) 为每个图表创建一个带有节点的
chartOptions对象
标签： javascript jquery ajax highcharts