Проверьте все диаграммы на наличие данных и скройте те, у которых их нет
Я пытаюсь проверить свои графики, сделанные с помощью высоких диаграмм , если у них есть какие-либо данные о загрузке и каждом перерисовке графика.
Я заставил его работать с этим кодом:
(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, но я ничего не смог найти.
Спасибо.
Редактировать:
Мне удалось найти проблему и исправить ее. Это был идентификатор графика... Сама функция работала так, как ожидалось.
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
.
Единственное, что вам нужно сделать, это настроить каждый график и сообщение с их собственным уникальным идентификатором, как указано выше.
Надеюсь, это кому-нибудь поможет.