问题描述
我原本想在我的网站上以并排的配置方式展示很多高空作业。现在我已经试图在网站上只包含一个高图，并让观众可以使用按钮在它们之间切换。我在这是一个总新手，所以我有这样做的几个问题。我一直在尝试使用下面的小提琴：
- >但是这个例子和我的设置有一些区别，我遇到了麻烦。
我使用我在网上找到的一些JSON模板从数据库填充我的highcharts（并且因为有如此多的图表，我将所有代码保存在单独的data.php文件中）。所有的工作都很好。
下面是我试图做的一个例子 - 我在下面的代码中插入了两个highcharts，但是它们会更多。每个图表都有不同的工具提示和Y轴选项等，所以我认为它不会改变数据本身。
<！DOCTYPE html>
< html lang =en>
< meta charset =utf-8>
< head>
< script type =text / javascriptsrc =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
}，
图例：{
启用：false
}，
title：{
text：'收入'，
x：25 // center
}，
xAxis：{
title：{
text：' '
}，
类别：[]
}，
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。类别= json [0] ['data'];
options.series [0] = json [1];
chart = new Highcharts.Chart（options）;
}）;
}）;
$ b $（'chart2'）。ready（函数（）{
var options = {
图表：{
renderTo：'chart2'，
类型：'列'，
marginTop：40，
marginBottom：75
}，
图例：{
启用：false
} ，
标题：{
text：'净利润或亏损'，
x：25 //中心
}，
xAxis：{
标题：{
text：''
}，
类别：[]
}，
yAxis：{
showInLegend：false，
tickAmount：11，
endOnTick：false，
startOnTick：true，
标签：{
formatter：function（）{
return Highcharts.number格式（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。类别= json [0] ['data'];
options.series [0] = json [6];
chart = new Highcharts.Chart（options）;
}）;
}）;
< / script>
< / head>
< body>
< div id =chart1>< / div>
< button id =buttonclass =autocompare>设定新资料< / 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来完成，但是我没有太多的使用经验，所以我只需要一点灵感。
非常感谢！
我会这样做 - 点击按钮，销毁图表并在其位置创建一个新图表。
该示例适用于页面上定义的数据和图表对象，但您可以在此单击事件处理函数内获取外部数据和外部图表选项定义，基于从点击按钮获得的同一个键。
$（document）.on（'click'，'。图表更新'，function（）{
chart.destroy（）;< - 销毁当前图表对象
$（'＃container'）。highcharts（chartOptions [$（this）.data （'chartName'）]）;< - 重建新图表
chart = $（'＃container'）。highcharts（）;< - 将'chart'变量与curr重新关联ent图表对象
}）;
小提琴：
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!
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:
这篇关于使用按钮或链接文本在多个Highcharts之间切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！