Question

我正在一个网站上工作，我非常重视Highcharts在图表中显示数据。我希望用户能够将每个图表“缩放”到模态窗口中以获得更好的可读性。

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

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

Answer 1

我使用jQuery模式面板工作了。

点击原始图表我正在调用一个javascript函数popupGraph，它将通过合并现有高级图的选项来创建新的高图。在modalPanel的关闭事件中，我正在破坏我们为弹出窗口创建的高图。

希望这会有所帮助..

我以小尺寸显示的实际图表的代码。

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: []
    }]
});

功能开启模式面板的代码

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

}

Answer 2

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

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

对此，并将container2显示设置为无

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

Answer 3

对于Santhosh的答案，我在popupGraph函数的末尾添加了此代码以加载数据：

     $.each(existingChart.series, function (prop, val) {
            popupChart.series[prop].setData(val.options.data);
            popupChart.series[prop].update(val.options);
        });

在模态窗口中打开Highcharts

3 个答案:

功能开启模式面板的代码