使用按钮或链接文本在许多Highcharts之间切换

我原本想在我的网站上以并排的配置显示很多高图。 现在我已经尝试在网站上只包含一个高图，并让观众可以选择使用按钮在它们之间切换。 我是一个新手，所以我在这方面遇到了一些问题。 我一直试图使用以下小提琴： http ： //jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/members/series-setdata/

– >但是这个例子和我的设置之间存在一些差异，我遇到了麻烦。

我使用我在网上找到的一些JSON模板从数据库填充我的高图（因为有很多图表，我将所有代码保存在一个单独的data.php文件中）。 一切正常。

下面是我想要做的一个例子 – 我在下面的代码中插入了两个高图，但是还会有更多。 每个图表都有不同的工具提示和y轴选项等。所以我认为只改变数据本身是不行的。

       $('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: '' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { formatter: function() { return ''+ this.series.name +'
'+ this.x +': '+ Highcharts.numberFormat(this.y, 0,'.',','); } }, series: [] } var 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: '' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { formatter: function() { return ''+ this.series.name +'
'+ this.x +': '+ Highcharts.numberFormat(this.y, 1,'.',','); } }, series: [] } var 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); }); });    
 Set new data   

迄今取得的进展：

我试图删除div并使用下面的代码创建一个新的div。 这导致删除’chart1’但不创建’chart2’。 此外 – 实际上有大约10个图表必须创建，所以我想知道是否有人可以想到一种方式，其中每个10个按钮将始终删除上面的当前图表，而是创建专用于该特定按钮的图表？

   $('#button').on('click',function(){ var elem = document.getElementById("chart1"); elem.remove(); var div = document.createElement('div'); div.id = "chart2"; });  

如果你能给我提供解释如何做到这一点或如何更好地理解整个事情的链接，我也很高兴。 我非常肯定这必须使用javascript或ajax完成，但我使用这些的经验很少所以我只需要一些灵感。

非常感谢提前！

Answer 1

我会做这样的事情 – 点击按钮，销毁图表并在其位置构建一个新图表。

此示例适用于页面上定义的数据和图表对象，但您可以在此单击事件处理程序内部，根据从单击按钮获取的相同密钥获取外部数据和外部图表选项定义。

  $(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 }); 

小提琴：

• http://jsfiddle.net/jlbriggs/7ntyzo6u/