在模态窗口中打开Highcharts

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

}