Проверьте все диаграммы на наличие данных и скройте те, у которых их нет


Я пытаюсь проверить свои графики, сделанные с помощью высоких диаграмм , если у них есть какие-либо данные о загрузке и каждом перерисовке графика.

Я заставил его работать с этим кодом:

(function (H) {

    var chartPrototype = H.Chart.prototype;

    // Hide graph if there are no data, show it othervise
    function handleNoData() {
        name = $(".graph_identifier").attr("data-name");

        if (this.series.length > 0 && this.series[0].data.length > 0) {
            $('#message-'+name).fadeOut(250, function(){
                $('#container-'+name+', #table-'+name).fadeIn(250);
            });             
        } else {
            $('#container-'+name+', #table-'+name).fadeOut(250, function(){
                $('#message-'+name).fadeIn(250);
            });             
        }
    }

    // Add event listeners
    chartPrototype.callbacks.push(function (chart) {
        H.addEvent(chart, 'load', handleNoData);
        H.addEvent(chart, 'redraw', handleNoData);
    });

}(Highcharts));

Проблема в том, что этот код работает только , когда у вас есть один график на странице . Но на моей домашней странице у меня есть 5 разных графиков, и когда на одном из них нет данных, он скрывает все графики.

Я попытался изменить код и передать диаграмму в handleNoData функционирует следующим образом:

H.addEvent(chart, 'load', handleNoData(chart));
H.addEvent(chart, 'load', printPage);
H.addEvent(chart, 'redraw', handleNoData(chart));

Но потом я просто получаю эту ошибку:

Uncaught TypeError: Cannot read property 'call' of undefined

Я думаю, это потому, что единственное, что вы можете сделать, это передать имя функции, а не параметры (если вы можете, то я не узнал, как в их API).

Прямо сейчас я должен использовать это для каждого отдельного графика, а это не то, что я хочу, а также он не обнаруживает перерисовки должным образом:

chart = $("#container").highcharts();
$(chart).on('load redraw', handleNoData(chart));

У кого-нибудь есть идеи, как этого добиться?

Я очень долго копал через их API и Google, но я ничего не смог найти.

Спасибо.

Редактировать:

Мне удалось найти проблему и исправить ее. Это был идентификатор графика... Сама функция работала так, как ожидалось.

Author: MiChAeLoKGB, 2016-02-10

1 answers

Что ж, мне удалось найти решение довольно быстро, поэтому я публикую полностью рабочий пример:

<div id="container-graph_name" class="graph-container" data-name="graph_name"></div>
<div id="message-graph_name" class="message-container">No data to show</div>

<script>
    (function (H) {

        var chartPrototype = H.Chart.prototype;

        // Hide graph if there are no data, show it othervise
        function handleNoData() {
            var name = $(this.renderTo).attr("data-name");

            if (this.series.length > 0 && this.series[0].data.length > 0) {
                $('#message-'+name).fadeOut(250, function(){
                    $('#container-'+name+').fadeIn(250);
                });
            } else {
                $('#container-'+name+').fadeOut(250, function(){
                    $('#message-'+name).fadeIn(250);
                });
            }
        }

        // Add event listeners
        chartPrototype.callbacks.push(function (chart) {
            H.addEvent(chart, 'load', handleNoData);
            H.addEvent(chart, 'redraw', handleNoData);
        });

    }(Highcharts));
</script>

Действительно, была проблема с идентификацией самой диаграммы. Этот код возьмет имя диаграммы из атрибута data-name контейнера и будет использовать его для отображения/скрытия divs с идентификаторами, начинающимися с container- и message- и заканчивающимися именем, заданным в атрибуте data-name.

Единственное, что вам нужно сделать, это настроить каждый график и сообщение с их собственным уникальным идентификатором, как указано выше.

Надеюсь, это кому-нибудь поможет.

 0
Author: MiChAeLoKGB, 2016-02-10 16:09:31