在模态窗口中打开Highcharts [英] Open Highcharts in modal window

问题描述

我正在一个使用Highcharts的网站上工作，因为它在图表中显示数据。我希望用户能够将每个图表缩放到一个模式窗口中以提高可读性。

我知道如何使用API​​来操纵图表，我不知道如何克隆图表并使用变量引用新图表？

我已经完成了大量搜索，并且我发现了所有内容如何在模态窗口中使用Highcharts自己的模式库打开，但我使用的是一个名为Lightview的模式库。

通过选择事件获取新的范围，然后从图表系列中获取相应的位置。
看我的例子。
http://jsfiddle.net/ricardolohmann/sZMFh/
所以，如果你想在灯箱内显示它，你必须更改以下代码：

  chart2 = new Highcharts.StockChart（{
图：{
 renderTo：'container2'
}，
 series：newSeries 
}）; 
  

到这个，并将container2显示设置为none

  Lightview.show（{url：'container2'，type：'inline'}）; 
  

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.

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?

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.

解决方案

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:

chart2 = new Highcharts.StockChart({
    chart: {
        renderTo: 'container2'
    },
    series: newSeries
});

To this one, and set the container2 display to none

Lightview.show({ url: 'container2', type: 'inline' });

这篇关于在模态窗口中打开Highcharts的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！