Откройте Highcharts в модальном окне - PullRequest
Новая
       17

Откройте Highcharts в модальном окне

4 голосов
/ 01 апреля 2012

Я работаю над сайтом, где я довольно активно использую Highcharts для представления данных в диаграммах. Я хочу, чтобы пользователь мог «масштабировать» каждую диаграмму в модальном окне для лучшей читаемости.

Я знаю, как манипулировать диаграммой с помощью ее API, но я не совсем уверен, как я могу клонировать диаграмму и обращаться к новой диаграмме с помощью переменной?

Я много занимался поиском, и все, что я нашел, - это как открыть в модальном окне собственную модальную библиотеку Highcharts, но я использую модальную библиотеку Lightview.

Ответы [ 3 ]

12 голосов
/ 13 июля 2012

Я получил эту работу, используя модальную панель 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");

}
1 голос
/ 11 апреля 2012

Вы можете получить новый диапазон по событию выбора, а затем получить соответствующую позицию из серии графиков.Смотрите мой пример.http://jsfiddle.net/ricardolohmann/sZMFh/ Итак, если вы хотите показать его внутри лайтбокса, вам нужно изменить следующий код: 

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

На этот, и установить для дисплея container2 значение none

* 1007.*
0 голосов
/ 19 июня 2019

В дополнение к ответу Сантоша я добавил это в конце функции popupGraph, чтобы загрузить данные: 

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