javascript 在模态窗口中打开 Highcharts
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9967149/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Open Highcharts in modal window
提问by rebellion
I'm working on a site where I use Highcharts quite heavily for presenting data in charts. I want to user to be able to "zoom" each chart into a modal window for better readability.
我在一个网站上工作，在那里我大量使用 Highcharts 在图表中显示数据。我希望用户能够将每个图表“放大”到一个模态窗口中以获得更好的可读性。
I know how to manipulate the chart with its API, but I'm not quite sure how I can clone the chart and refer to the new chart with an variable?
我知道如何使用其 API 操作图表，但我不太确定如何克隆图表并使用变量引用新图表？
I've done alot of searching, and all I've found is how to open in modal window with Highcharts own modal library, but I'm using a modal library called Lightview.
我已经做了很多搜索，我发现的只是如何使用 Highcharts 自己的模态库在模态窗口中打开，但我使用的是一个名为 Lightview 的模态库。
采纳答案by Ricardo Alvaro Lohmann
You can get the new range by the selection event and then get the respective position from the chart serie. See my example. http://jsfiddle.net/ricardolohmann/sZMFh/So, if you want to show it inside the lightbox you have to change the following code:
您可以通过选择事件获取新的范围，然后从图表系列中获取相应的位置。看我的例子。 http://jsfiddle.net/ricardolohmann/sZMFh/所以，如果你想在灯箱内显示它，你必须更改以下代码：
chart2 = new Highcharts.StockChart({
chart: {
renderTo: 'container2'
},
series: newSeries
});
To this one, and set the container2 display to none
到这个，并将container2显示设置为none
Lightview.show({ url: 'container2', type: 'inline' });
回答by Santhosh Suryadevara
I have got this working using jQuery modal panel.
我已经使用 jQuery 模式面板完成了这项工作。
On click of original chart I am calling a javascript function popupGraph which will create a new highchart by merging the options of the existing highchart. On close event of modalPanel I am destroying the highchart that we have created for popup.
单击原始图表时，我正在调用一个 javascript 函数 popupGraph，它将通过合并现有 highchart 的选项来创建一个新的 highchart。在 modalPanel 的关闭事件中，我正在销毁我们为弹出窗口创建的 highchart。
Hope this helps..
希望这可以帮助..
Code for actual chart that I show in small size.
我以小尺寸显示的实际图表的代码。
trackingChart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
events: {
load: loadChart,
click: function() {
popUpGraph(this);
}
}
},
xAxis: {
categories: []
},
yAxis: {
min: 0,
},
legend: {
layout: 'horizontal',
backgroundColor: '#FFFFFF',
align: 'center',
verticalAlign: 'bottom',
x: 10,
y: 0,
floating: false,
shadow: true
},
tooltip: {
formatter: function() {
return ''+
this.x +': '+ this.y +' points';
}
},
plotOptions: {
column: {
pointPadding: 0,
borderWidth: 0
}
},
exporting: {
enabled: false
},
series: [{
data: []
}, {
data: []
}]
});
Code for function opening modal panel
函数打开模态面板代码
function dummy() {}
function popUpGraph(existingChart) {
var options = existingChart.options;
var popupChart = new Highcharts.Chart(Highcharts.merge(options, {
chart: {
renderTo: 'popup_chart',
height:300,
width:700,
zoomType: 'x',
events: {
load: dummy,
click: dummy
}
}
}));
$( "#dialog").dialog({
autoOpen: false,
height: 350,
width: 750,
modal: true,
show:'blind',
close: function(event, ui) { popupChart.destroy(); }
});
$("#dialog").dialog("open");
}
回答by amackay11
Further to Santhosh's answer, I added this at the end of popupGraph function to get data loaded up:
在 Santhosh 的回答之后，我在 popupGraph 函数的末尾添加了这个来加载数据：
$.each(existingChart.series, function (prop, val) {
popupChart.series[prop].setData(val.options.data);
popupChart.series[prop].update(val.options);
});
