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

问题描述

我正在一个网站上工作，我大量使用 Highcharts 在图表中呈现数据.我希望用户能够将每个图表缩放"到模态窗口中以获得更好的可读性.

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.

我知道如何使用其 API 操作图表，但我不太确定如何克隆图表并使用变量引用新图表?

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?

我做了很多搜索，我发现的只是如何使用 Highcharts 自己的模态库在模态窗口中打开，但我使用的是一个名为 Lightview 的模态库.

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.

推荐答案

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

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

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

To this one, and set the container2 display to none

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

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