Highchart в новом окне

Я использую highcharts для отображения диаграммы на моей странице. Он работает нормально, но иногда данные на графике слишком «сжаты», поэтому я должен найти способ увидеть график в большем размере.

Прочитал несколько постов в инете на эту тему: - вообще советуют использовать хайслайд, но я не хочу, так как моя страница уже перегружена скриптами мне, но мне это не удалось - единственный квази-рабочий пример, который мне подходит, выглядит следующим образом: (внутри объекта параметров я добавляю эти свойства).

exporting: {
                    buttons: {
                        popUpBtn: {
                            symbol: 'square',
                            _titleKey: 'FullScreenButtonTitle',
                            x: -60,
                            symbolSize:18,
                            symbolFill: '#B5C9DF',
                            hoverSymbolFill: '#779ABF',
                            onclick: function () {
                                var win=window.open('','','location=0,titlebar=0,status=0,width=780,height=350');
                                win.focus();
                                var divtag = win.document.createElement("div");
                                divtag.id = "div1";
                                win.document.body.appendChild(divtag);
                                win.document.write('<script type="text/javascript" src="script/highcharts/js/highcharts.js"></script>\
                                                                    <script type="text/javascript" src="script/highcharts/js/modules/exporting.js"></script>');
                                this.options.renderTo=divtag;
                                var chart = new Highcharts.Chart(this.options);

                                win.document.close();
                            }
                        },
                        exportButton: {
                            enabled: true
                        },
                        printButton: {
                            enabled: true
                        }

                    }
                }

Однако это не работает, так как тег div не вставлен, и все, что я получаю, это

<html>
 <head>
   <script type="text/javascript" src="script/highcharts/js/highcharts.js">  </script>
    <script type="text/javascript" src="script/highcharts/js/modules/exporting.js"></script>
    </head></html>

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

--ИЗМЕНИТЬ ---

Наконец-то я понял, что может быть рабочей стратегией: создать страницу «chartpopup.html» и передать ей параметры, необходимые для построения копии графика, который я визуализирую.

Итак, теперь у меня есть:

индекс.html:

    chartOptions = {
            series: [
                {
                    name: 'example',
                    data: [83.6, 78.8, 98.5, 93.4, 106.0]
                }]    
          //// CUT SOME CODE

                exporting: {
                    buttons: {
                        popUpBtn: {
                            enabled:true,
                            symbol: 'square',
                            _titleKey: 'FullScreenButtonTitle',
                            x: -60,
                            symbolSize:18,
                            symbolFill: '#B5C9DF',
                            hoverSymbolFill: '#779ABF',
                            onclick: function () {
                                look this!--------> generalPurposeGlobalVar = this;
                                var win=window.open('./chartpopup.html','Full Size Chart','location=0,titlebar=0,status=0,width=780,height=650');

                            }
                        },
                        exportButton: {
                            enabled: true
                        },
                        printButton: {
                            enabled: true
                        }

                    }
                }
            };
        this.highChart=new Highcharts.Chart(this.chartOptions);

и chartpopup.html:

   <!DOCTYPE html>
   <html>
   <head>
       <meta charset="utf-8">
       <title>Chart full Size</title>
   <script type="text/javascript" src="script/jquery-1.7.1-min.js"></script>
   <script type="text/javascript" src="script/highcharts/js/highcharts.js"></script>
   <script type="text/javascript" src="script/highcharts/js/modules/exporting.js">              </script>

   </head>
   <body>

   <div id="container" style="min-width: 400px; height: 650; margin: 0 auto"></div>

   <script>
   var chart;

   $(document).ready(function() {

       var mychart=window.opener.generalPurposeGlobalVar;

       mychart.options.chart.renderTo= 'container';
       chart = new Highcharts.Chart(mychart.options);


   });
   </script>
   </body>
   </html>

Эти две страницы на самом деле работают ТОЛЬКО с графиком по умолчанию. Если я изменю и перерисую график, я не смогу воспроизвести его на всплывающей странице!

Код, который я использую для изменения графика, в основном такой:

        this.chartOptions.series=[{name:field.split('_').join('\n')}];
        this.highChart.destroy();
        this.highChart=new Highcharts.Chart(this.chartOptions);
        this.highChart.xAxis[0].setCategories(_.isEmpty(mygroups) ? [] : mygroups);
        this.highChart.series[0].setData([]);
        this.highChart.setTitle({text: this.highChart.title.text},{text:(field.split('_').join(' ')),  });
        this.highChart.redraw();//
   [...]
        self.highChart.series[0].addPoint(result);//it's a point I calculated before

javascript highcharts backbone.js
person Daniele B    schedule 23.03.2012    source источник
comment
Вы получаете сообщение об ошибке?   -  person Alex Morales    schedule 23.03.2012
comment
а, да, конечно, забыл упомянуть :Uncaught TypeError: Cannot call method 'appendChild' of null   -  person Daniele B    schedule 26.03.2012
comment
Кроме того, для меня приемлем любой другой подходящий способ иметь более широкий график (возможно, без использования дополнительных библиотек js), если у вас есть какие-либо предложения...   -  person Daniele B    schedule 26.03.2012
comment
Да, похоже, вы обращаетесь к DOM во всплывающем окне до того, как оно станет доступно. Решение, которое предлагает Ашулер, будет работать, потому что вы указываете на существующую страницу.   -  person Alex Morales    schedule 27.03.2012
comment
поэтому вы предлагаете мне сделать это: 1) открыть существующую страницу во всплывающем окне, 2) работать с элементами html, содержащимися на этой странице. Это правильно?   -  person Daniele B    schedule 28.03.2012
comment
Да, это должно решить вашу проблему. Обратите внимание, что он использует прослушиватель событий jQuery для запуска кода в document.ready. Эта ссылка здесь объясняет, что jQuery действительно прослушивает в этом событии: stackoverflow.com/questions/799981/ Это хороший способ убедиться, что DOM готов к доступу через javascript.   -  person Alex Morales    schedule 28.03.2012
comment
Все еще получаете ошибки? Можете ли вы обновить свой код и объяснить, что происходит, пожалуйста?   -  person Ricardo Alvaro Lohmann    schedule 21.04.2012

Ответы (3)


arrow_upward
4
arrow_downward

Вот пример Highcharts, работающий с всплывающим окном «oldschool»:

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>highcharts foobar</title>
</head>
<body>
    <a href="javascript:open_chart_popup();">Open Chart Popup</a>
<script>
    function open_chart_popup() {
        window.open('popup.html', 'chart popup title', 'width=1680px height=1050px');
    }
</script>
</body>
</html>

всплывающее окно.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>highcharts foobar</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

<script>
var chart;

$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'line',
            marginRight: 130,
            marginBottom: 25
        },
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: WorldClimate.com',
            x: -20
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            formatter: function() {
                return '<b>'+ this.series.name +'</b><br/>'+
                this.x +': '+ this.y +'°C';
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 100,
            borderWidth: 0
        },
        series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: 'New York',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }, {
            name: 'Berlin',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            name: 'London',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]
    });
});
</script>
</body>
</html>

Если это решение вам не подходит, не могли бы вы сообщить нам, какие библиотеки JavaScript вы используете (этот пример основан на jQuery). Как сказано в документации, для highcharts требуется jQuery, Mootools или Prototype: http://www.highcharts.com/documentation/how-to-use

Если вы можете использовать jQuery, вы можете заменить это всплывающее окно, используя некоторые более крутые эффекты, такие как: http://jqueryui.com/demos/dialog/

Несмотря на это, если вам нужна помощь для вашего скрипта, не могли бы вы подумать о создании jsfiddle, я не могу воспроизведите вашу ошибку.

ИЗМЕНИТЬ:

Итак, у вас есть все, чтобы справиться с этим.

Я вижу два варианта:

  • Вы отправляете данные пользователя series JSON на свой сервер с помощью запроса AJAX. Затем ваш сервер отправляет вам обратно представление или кучу html/js, содержащих ваш highchart с пользовательскими данными. Вернувшись к клиенту, вы делаете с ним все, что хотите (например, запускаете всплывающее окно, содержащее график). Мне не слишком удобно работать с магистралью, но я уверен, что вы можете сгенерировать шаблон и отобразить его обратно (это может помочь http://japhr.blogspot.fr/2011/08/getting-started-with-backbonejs-view.html)

  • Другим решением было бы напрямую установить ваш шаблон (содержащий график) в представление, но скрыть его по умолчанию. Затем, когда series правильно установлены пользователем, вы просто отображаете шаблон (например, во всплывающем окне). Это решение позволяет избежать вызова сервера, поэтому я бы предложил это.

ИЗМЕНИТЬ 2:

Итак, я сделал jsFiddle, показывающий базовый пример того, как обновлять диаграмму на основе пользовательского ввода: http://jsfiddle.net/MxtkM/

В примере обновляется последнее значение всех рядов на графике, вот как:

$('#december_value').bind('keyup', function() {
    var user_input_value = parseFloat($(this).val()); // cast to float

    for (var s in chart.series) { // loop through the series
        var old_data = chart.series[s].data;
        var new_data = [];

        for (var d in old_data ) { // loop through data objects
           new_data.push(old_data[d].config); // config property contains the y value
        }

        new_data[new_data.length - 1] = user_input_value; // update the last value

        chart.series[s].setData(new_data); // use setData method to refresh the datas of the serie
    }
});

В этом примере метод setData используется путем предоставления нового массива данных. Если это не соответствует вашим потребностям, есть другой способ обновить ваш график, в котором вы перерисовываете весь график, выполнив var chart = new Highcharts.Chart(options);. (Это объясняется в ссылках выше).

Эти две ссылки также хорошо читаются:

Теперь вы сможете делать со своим графиком все, что хотите, на основе пользовательского ввода.

person Adrien Schuler    schedule 27.03.2012
comment
Привет aschuler спасибо за ваш ответ. Моя проблема в том, что данные, используемые для заполнения диаграммы (series), динамически генерируются на основе пользовательского ввода с главной страницы (а не извлекаются с сервера). Вот почему я не могу использовать совершенно новую страницу. Я использую colorbox для всплывающих окон, jquery, jquery-ui (много всего!) Все в фреймворке backbone.js (поэтому я также использую _.underscore.js), и страница уже довольно тяжелая. - person Daniele B; 27.03.2012
comment
Я полагаю, что лучшим решением является динамическое создание страницы, которая отображается в новом окне или во всплывающем окне. Но у меня проблемы с этим. Есть ли у вас какие-либо идеи о том, как динамически создавать содержимое страницы (с включенным сценарием), а затем отображать его на новой странице/всплывающем окне/окне? Также: как вы думаете, это хорошая стратегия? - person Daniele B; 27.03.2012
comment
Привет aschuler, второй вариант именно то, что я собирался сделать. Я понял, в том числе благодаря комментарию Алекса Моралеса, что лучше всего открыть существующую страницу и работать над ее элементами... Это как раз тот момент, когда я немного застрял. - person Daniele B; 28.03.2012
comment
спасибо за редактирование, все равно я не могу получить никакого результата. Пожалуйста, взгляните на мое редактирование. - person Daniele B; 30.03.2012
comment
@Adreien Schuler: я был бы рад наградить вас наградой, но... не могли бы вы оказать небольшую дополнительную помощь? Спасибо. - person Daniele B; 02.04.2012
comment
У вас есть ошибки? Вы должны parseFloat() ввести значения пользователя, прежде чем добавлять их в массив series. В противном случае попробуйте закомментировать лишние опции и сосредоточиться на массиве series, заархивировать его и посмотреть, как он выглядит. Возможно, он не очень хорошо сформирован. - person Adrien Schuler; 02.04.2012
comment
Вы все равно должны были дать награду, так как на ваш первоначальный вопрос был дан ответ. Это действительно другая проблема, с которой вы столкнулись. - person Alex Morales; 04.04.2012
comment
Привет, Алекс, я не чувствовал, что на мой оригинальный вопрос ответили, извините. - person Daniele B; 20.04.2012

arrow_upward
1
arrow_downward

Побродив вокруг и задав вопросы, я обнаружил, что лучший способ сделать это — сделать полноэкранным div, содержащий диаграмму.

Это очень простое решение, но оно работает.

Этот пост очень полезен Как сделать div полноэкранным?

Функция, подобная следующей, должна помочь с div "#graph":

function fullscr() {

        $('#graph').css({
            width: $(window).width(),
            height: $(window).height()
        });

    }

Надеюсь, это поможет.

person Daniele B    schedule 01.10.2012

arrow_upward
1
arrow_downward

Лучшим решением будет HTML5 Fullscreen API для полноэкранного режима.

function fullScreen(){
     var elem = document.getElementById("highchart_div_id");
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else if (elem.msRequestFullscreen) {
      elem.msRequestFullscreen();
    } else if (elem.mozRequestFullScreen) {
      elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) {
      elem.webkitRequestFullscreen();
    }
}

Однако этот фрагмент кода работает только в браузерах нового поколения, и у меня есть рабочий вывод из Google chrome и Mozilla Firefox.

Добрый день

person Navas Basheer    schedule 20.09.2015