Привязка пустого массива к графику
1
Как обновить диаграмму до пустого массива данных, чтобы показать, что данных пока нет, а затем вернуться к тем, у которых есть данные, без манипуляций с объектами javascript? Я получаю ошибку, когда выбранный массив данных пуст.
Здесь я сделал образец кода. Нажав на 2015, 2016 или 2017... никаких проблем! Однако, если я нажму 2018, который пуст, это повлияет на другие годы, которые должны быть статическими.
Чтобы смоделировать ошибку:
- После загрузки выберите 2018: Показывает, что данные не отображаются, как ожидалось
- Выберите 2017: Показывает данные 2017, как и ожидалось.
- Выберите 2016: Показывает данные 2016 года, как и ожидалось.
- Выберите 2017: Показывает данные 2016, вместо отображения данных 2017. JS переменная trafficinfo_data_series_2017 обновляется до 2016.
var trafficinfo_data_xaxis_default = [
["North America"],["European Union"],
["Asia Pacific"],
["Australia"],["Africa"]
];
var trafficinfo_data_series_default = [{
"name": "American Brands",
"data": [
[57.37533669],
[0.117136],
[0.08759559],
[0.692],
[0.35]
],
"stack": "cars"
}, {
"name": "European Brands",
"data": [
[23.92798527],
[57.37533669],
[12.541969060000001],
[14.24307465],
[11.84693269]
],
"stack": "cars"
}, {
"name": "Japanese Brands",
"data": [
[0.59301429],
[3],
[32.95988396],
[12.158916],
[0.01123203],
],
"stack": "cars"
}];
$(function() {
$('#trafficinfo').highcharts({
colors: ['#cbddad', '#fac58e', '#a0ddea'],
chart: {
type: 'bar',
height: 300,
style: {
fontFamily: 'Roboto'
}
},
xAxis: {
categories: trafficinfo_data_xaxis_default,
title: {
text: 0
}
},
yAxis: {
title: {
text: 'Amount (USD Millions)',
align: 'high'
},
labels: {
overflow: 'justify'
},
stackLabels: {
enabled: true,
formatter: function() {
return Highcharts.numberFormat((this.total), 2, '.');
}
}
},
title: {
text: 'Year 2017'
},
tooltip: {
backgroundColor: {
linearGradient: [0, 0, 0, 60],
stops: [
[0, '#FFFFFF'],
[1, '#E0E0E0']
]
},
borderWidth: 1,
borderColor: '#AAA',
headerFormat: '<span style="font-size:12px; font-weight:700; text-decoration:underline">{point.key}</span><table>',
pointFormatter: function() {
return '<tr><td><i class="fa fa-circle" style="color:' + this.series.color + '"></i> ' + this.series.name + ':</td>' + '<td style="text-align:right; padding:0; font-weight:700;">' + Highcharts.numberFormat((this.y), 2, '.') + ' million</td></tr>';
},
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
bar: {
stacking: 'normal'
},
series: {
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
},
dataLabels: {
enabled: false,
format: '{point.y:,.2f}',
style: {
color: 'black',
fontWeight: 'normal'
}
}
}
},
credits: {
enabled: false
},
series: trafficinfo_data_series_default
});
});
var trafficinfo_data_xaxis_2015 = [
["North America"],
["European Union"],
["Asia Pacific"],
["Australia"],
["Africa"]
];
var trafficinfo_data_series_2015 = [{
"name": "American Brands",
"data": [
[41.37533669],
[0.557136],
[1.88759559],
[0.092],
[3.234]
],
"stack": "cars"
}, {
"name": "European Brands",
"data": [
[18.92798527],
[37.37533669],
[10.541969060000001],
[8.24307465],
[7.84693269]
],
"stack": "cars"
}, {
"name": "Japanese Brands",
"data": [
[2.59301429],
[4.74857],
[18.95988396],
[6.158916],
[2.01123203],
],
"stack": "cars"
}];
var trafficinfo_data_xaxis_2016 = [
["North America"],
["European Union"],
["Asia Pacific"],
["Australia"],
["Africa"]
];
var trafficinfo_data_series_2016 = [{
"name": "American Brands",
"data": [
[47.92798527],
[1.95988396],
[1.38759559],
[0.95492],
[2.35]
],
"stack": "cars"
}, {
"name": "European Brands",
"data": [
[18.24307465],
[47.37533669],
[14.841969060000001],
[9.64307465],
[15.84693269]
],
"stack": "cars"
}, {
"name": "Japanese Brands",
"data": [
[2.95988396],
[4.31048141],
[35.95988396],
[14.158916],
[2.01123203],
],
"stack": "cars"
}];
var trafficinfo_data_xaxis_2017 = [
["North America"],
["European Union"],
["Asia Pacific"],
["Australia"],
["Africa"]
];
var trafficinfo_data_series_2017 = [{
"name": "American Brands",
"data": [
[57.37533669],
[0.117136],
[0.08759559],
[0.692],
[0.35]
],
"stack": "cars"
}, {
"name": "European Brands",
"data": [
[23.92798527],
[57.37533669],
[12.541969060000001],
[14.24307465],
[11.84693269]
],
"stack": "cars"
}, {
"name": "Japanese Brands",
"data": [
[0.59301429],
[3],
[32.95988396],
[12.158916],
[0.01123203],
],
"stack": "cars"
}];
var trafficinfo_data_xaxis_2018 = [];
var trafficinfo_data_series_2018 = [{
"name": "American Brands",
"data": [],
"stack": "cars"
}, {
"name": "European Brands",
"data": [],
"stack": "cars"
}, {
"name": "Japanese Brands",
"data": [],
"stack": "cars"
}];
$(document).ready(function() {
$('.years input[type=radio]').on('change', function() {
var selected_year = this.value;
var chart = $('#trafficinfo').highcharts();
for (var i = 0; i < eval('trafficinfo_data_series_' + selected_year).length; i++) {
chart.series[i].setData(eval('trafficinfo_data_series_' + selected_year)[i].data);
}
chart.xAxis[0].setCategories(eval('trafficinfo_data_xaxis_' + selected_year));
chart.setTitle({
text: "Year " + selected_year
});
});
});<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/no-data-to-display.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
</head>
<body>
<div class="btn-group years" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" value="2015" autocomplete="off"> 2015
</label>
<label class="btn btn-primary">
<input type="radio" name="options" value="2016" autocomplete="off"> 2016
</label>
<label class="btn btn-primary active">
<input type="radio" name="options" value="2017" autocomplete="off" checked="checked"> 2017
</label>
<label class="btn btn-primary">
<input type="radio" name="options" value="2018" autocomplete="off"> 2018
</label>
</div>
<div id="trafficinfo" style="min-width: 310px; height: 200px; margin: 0 auto"></div>
</body>
</html>1 ответ
0
Лучший ответ
Эта проблема связана с ссылкой на объект javascript. Это уже было сообщено и разрешено как правильное поведение. Используйте $.expand если вы хотите setData несколько раз.
Также избегайте использования eval когда можете.
$(function() {
$('#trafficinfo').highcharts({
colors: ['#cbddad', '#fac58e', '#a0ddea'],
chart: {
type: 'bar',
height: 300,
style: {
fontFamily: 'Roboto'
}
},
xAxis: {
categories: trafficinfo_data.default.xaxis,
title: {
text: 0
}
},
yAxis: {
title: {
text: 'Amount (USD Millions)',
align: 'high'
},
labels: {
overflow: 'justify'
},
stackLabels: {
enabled: true,
formatter: function() {
return Highcharts.numberFormat((this.total), 2, '.');
}
}
},
title: {
text: 'Year 2017'
},
tooltip: {
backgroundColor: {
linearGradient: [0, 0, 0, 60],
stops: [
[0, '#FFFFFF'],
[1, '#E0E0E0']
]
},
borderWidth: 1,
borderColor: '#AAA',
headerFormat: '<span style="font-size:12px; font-weight:700; text-decoration:underline">{point.key}</span><table>',
pointFormatter: function() {
return '<tr><td><i class="fa fa-circle" style="color:' + this.series.color + '"></i> ' + this.series.name + ':</td>' + '<td style="text-align:right; padding:0; font-weight:700;">' + Highcharts.numberFormat((this.y), 2, '.') + ' million</td></tr>';
},
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
bar: {
stacking: 'normal'
},
series: {
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
},
dataLabels: {
enabled: false,
format: '{point.y:,.2f}',
style: {
color: 'black',
fontWeight: 'normal'
}
}
}
},
credits: {
enabled: false
},
series: $.extend(true, [], trafficinfo_data.default.series)
});
});
$(document).ready(function() {
$('.years input[type=radio]').on('change', function() {
var selected_year = this.value;
var chart = $('#trafficinfo').highcharts();
trafficinfo_data[selected_year].series.forEach(function(serie, index) {
chart.series[index].setData($.extend(true, [], serie.data));
});
chart.xAxis[0].setCategories(trafficinfo_data[selected_year].xaxis);
chart.setTitle({
text: "Year " + selected_year
});
});
});<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/no-data-to-display.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
</head>
<body>
<script>
var trafficinfo_data = {
default: {
xaxis: [
["North America"],["European Union"],
["Asia Pacific"],
["Australia"],["Africa"]
],
series: [{
"name": "American Brands",
"data": [
[57.37533669],
[0.117136],
[0.08759559],
[0.692],
[0.35]
],
"stack": "cars"
}, {
"name": "European Brands",
"data": [
[23.92798527],
[57.37533669],
[12.541969060000001],
[14.24307465],
[11.84693269]
],
"stack": "cars"
}, {
"name": "Japanese Brands",
"data": [
[0.59301429],
[3],
[32.95988396],
[12.158916],
[0.01123203],
],
"stack": "cars"
}]
},
2015: {
xaxis: [
["North America"],
["European Union"],
["Asia Pacific"],
["Australia"],
["Africa"]
],
series: [{
"name": "American Brands",
"data": [
[41.37533669],
[0.557136],
[1.88759559],
[0.092],
[3.234]
],
"stack": "cars"
}, {
"name": "European Brands",
"data": [
[18.92798527],
[37.37533669],
[10.541969060000001],
[8.24307465],
[7.84693269]
],
"stack": "cars"
}, {
"name": "Japanese Brands",
"data": [
[2.59301429],
[4.74857],
[18.95988396],
[6.158916],
[2.01123203],
],
"stack": "cars"
}]
},
2016: {
xaxis: [
["North America"],
["European Union"],
["Asia Pacific"],
["Australia"],
["Africa"]
],
series: [{
"name": "American Brands",
"data": [
[47.92798527],
[1.95988396],
[1.38759559],
[0.95492],
[2.35]
],
"stack": "cars"
}, {
"name": "European Brands",
"data": [
[18.24307465],
[47.37533669],
[14.841969060000001],
[9.64307465],
[15.84693269]
],
"stack": "cars"
}, {
"name": "Japanese Brands",
"data": [
[2.95988396],
[4.31048141],
[35.95988396],
[14.158916],
[2.01123203],
],
"stack": "cars"
}]
},
2017: {
xaxis: [
["North America"],
["European Union"],
["Asia Pacific"],
["Australia"],
["Africa"]
],
series: [{
"name": "American Brands",
"data": [
[57.37533669],
[0.117136],
[0.08759559],
[0.692],
[0.35]
],
"stack": "cars"
}, {
"name": "European Brands",
"data": [
[23.92798527],
[57.37533669],
[12.541969060000001],
[14.24307465],
[11.84693269]
],
"stack": "cars"
}, {
"name": "Japanese Brands",
"data": [
[0.59301429],
[3],
[32.95988396],
[12.158916],
[0.01123203],
],
"stack": "cars"
}]
},
2018: {
xaxis: [],
series: [{
"name": "American Brands",
"data": [],
"stack": "cars"
}, {
"name": "European Brands",
"data": [],
"stack": "cars"
}, {
"name": "Japanese Brands",
"data": [],
"stack": "cars"
}]
},
}
</script>
<div class="btn-group years" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" value="2015" autocomplete="off"> 2015
</label>
<label class="btn btn-primary">
<input type="radio" name="options" value="2016" autocomplete="off"> 2016
</label>
<label class="btn btn-primary active">
<input type="radio" name="options" value="2017" autocomplete="off" checked="checked"> 2017
</label>
<label class="btn btn-primary">
<input type="radio" name="options" value="2018" autocomplete="off"> 2018
</label>
</div>
<div id="trafficinfo" style="min-width: 310px; height: 200px; margin: 0 auto"></div>
</body>
</html>
bigless
Поделиться
-
0Работал как шарм! Спасибо за этоRobert
Ещё вопросы
- 0горячий, чтобы получить значение радио кнопки в группе
- 1Python преобразовать объект Redis в исходный тип данных
- 0Нарисуйте 2 куба в OpenGL, используя GLM
- 1Flask bcrypt.check_password_hash () всегда возвращает False, не может сузить мою ошибку
- 0PRE и поведение пробелов
- 0Перезагрузить таблицу без обновления всей страницы в php
- 0условное форматирование по отрицательному значению
- 1Не удалось выполнить сертификацию приложения Manifest
- 1Ошибка импорта JavaFX для пакета javafx.builders
- 1React-Native добавляет var в тег просмотра
- 0JQuery класс переключения на клик
- 1Измените время сервера на местное время, отправленное Facebook
- 1Как получить разные цвета для разных диапазонов значений в простых линейных графиках Google?
- 1Разработка службы публикации и подписки (Callbacks vs Interface)
- 0Выберите следующее «свободное» целое число на основе ввода
- 1Управление потоками Quartz.NET 1.0 в Windows Service
- 0Как использовать jQuery и класс span?
- 0Размер текстового поля Yii timepicker
- 0Запустите JavaScript на Btn, но не контейнер
- 0Apache Shiro и Spring MVC
- 0JQuery Datatable Следующая кнопка работает неправильно
- 1Android рухнул после обновления androidx biometric до 1.0.0-alpha04
- 0отправить ответ из node.js в Jquery
- 0Как передать значение из DropDownListFor в угловую функцию?
- 0Скомпилировать функцию MATLAB во что-то, что можно запустить на терминале linux без MATLAB?
- 0Вызов href из JavaScript
- 0Использование контроллеров, добавленных маршрутами, для объявления переменных $ scope в Angular JS?
- 1Отсутствует метод getRequestBuilder в классе RemoteMessageProto
- 0Компилятор C ++ имеет противоречивые жалобы на перегрузку оператора <<
- 1Android загружает значения из файла строк по умолчанию (strings.xml) после изменения локали во второй раз
- 1Отправить токен в шапке (разные действия)
- 0Методы цепочки с задержками в JavaScript
- 0Как заполнить значения в <li>, используя ng-repeat из JSON
- 0Как Node's require () разрешает, так что постоянное объединение баз данных в Express работает?
- 1SVG круговой путь анимации
- 0Вставить несколько строк в laravel с полезной нагрузкой JSON
- 0Опции fancyBox не имеют никакого эффекта
- 0мы можем использовать скомпилированный код hiphop на производственном сервере без исходного кода?
- 0Неправильное сравнение строк с использованием strtok ()
- 1Visual Studio: ошибка указанного пути не поддерживается
- 0Сохраняйте отзывчивые встроенные блоки расположенными с помощью переносимых текстовых слов
- 0Как установить максимальный выбранный месяц в mtz.monthpicker?
- 1Как использовать java.util.GZIPOutputStream или любой другой для хранения нескольких записей в виде одного файла, где каждая запись упакована по отдельности?
- 0Очистить разметку AngularJs
- 0std :: bad_cast при использовании std :: basic_istringstream <unsigned short>
- 1Боке: Не удается обновить формат всплывающей подсказки
- 0Как добавить проверку на стороне клиента зависимого ввода с использованием JavaScript и rails?
- 0Div открывается вертикально, когда страница загружается с помощью JavaScript и CSS
- 1Python ftplib msld ошибка: 500 Команда не понята
- 1Моя программа зачетных книжек не печатает должным образом, чтобы превзойти документ
