javascript - 在模态窗口中打开 Highcharts

Question

我在一个网站上工作，我大量使用 Highcharts 在图表中显示数据。我希望用户能够将每个图表“缩放”到模态窗口中以提高可读性。

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

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

Answer 1

我已经使用 jQuery 模式面板完成了这项工作。

单击原始图表时，我将调用一个 javascript 函数 popupGraph，它将通过合并现有 Highcharts 的选项来创建一个新的 Highcharts 。在 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");

}