Перезагрузите данные диаграммы через JSON с помощью Highcharts.
https://stackoverflow.com/questions/4210879
-
25-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Я пытаюсь перезагрузить данные для диаграммы Highcharts через JSON при нажатии кнопки в другом месте страницы.Первоначально я хотел бы отобразить набор данных по умолчанию (расходы по категориям), но затем загрузить новые данные на основе пользовательского ввода (например, расходы по месяцам).Самый простой способ вывода JSON с сервера — это передать запрос GET на страницу PHP, например. $.get('/dough/includes/live-chart.php?mode=month', получая это значение из атрибута ID кнопки.
Вот что мне удалось получить на данный момент для получения данных по умолчанию (расходы по категориям).Необходимо найти способ загрузки совершенно разных данных в круговую диаграмму на основе ввода пользователя по требованию:
$(document).ready(function() {
//This is an example of how I would retrieve the value for the button
$(".clickMe").click(function() {
var clickID = $(this).attr("id");
});
var options = {
chart: {
renderTo: 'graph-container',
margin: [10, 175, 40, 40]
},
title: {
text: 'Spending by Category'
},
plotArea: {
shadow: null,
borderWidth: null,
backgroundColor: null
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: $'+ this.y;
}
},
credits: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
formatter: function() {
if (this.y > 5) return '$' + this.y;
},
color: 'white',
style: {
font: '13px Trebuchet MS, Verdana, sans-serif'
}
}
}
},
legend: {
layout: 'vertical',
style: {
left: 'auto',
bottom: 'auto',
right: '50px',
top: '100px'
}
},
series: [{
type: 'pie',
name: 'Spending',
data: []
}]
};
$.get('/dough/includes/live-chart.php', function(data) {
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
var data = {};
$.each(items, function(itemNo, item) {
if (itemNo === 0) {
data.name = item;
} else {
data.y = parseFloat(item);
}
});
options.series[0].data.push(data);
});
// Create the chart
var chart = new Highcharts.Chart(options);
});
});
Любая помощь будет принята с благодарностью
РЕДАКТИРОВАТЬ
Вот обновленный Javascript благодаря Robodude.Джон, ты направляешь меня на правильный путь — спасибо!Я сейчас запутался, как заменить данные на графике из AJAX-запроса.Должен признать, что код, следующий за $.get(), скорее всего, из примера кода, я не до конца понимаю, что происходит при его запуске — возможно, есть лучший способ форматирования данных?
Мне удалось добиться некоторого прогресса в том, что диаграмма теперь загружает новые данные, но они добавляются поверх уже имеющихся.Подозреваю, что виновата вот эта строка:
options.series[0].data.push(data);
Я попробовал options.series[0].setData(data);но ничего не происходит.С другой стороны, запрос AJAX работает безупречно в зависимости от значения меню выбора, и ошибок Javascript нет.Вот рассматриваемый код без параметров диаграммы:
$.get('/dough/includes/live-chart.php?mode=cat', function(data) {
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
var data = {};
$.each(items, function(itemNo, item) {
if (itemNo === 0) {
data.name = item;
} else {
data.y = parseFloat(item);
}
});
options.series[0].data.push(data);
});
// Create the chart
var chart = new Highcharts.Chart(options);
});
$("#loadChart").click(function() {
var loadChartData = $("#chartCat").val();
$.get('/dough/includes/live-chart.php?mode=' + loadChartData, function(data) {
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
var data = {};
$.each(items, function(itemNo, item) {
if (itemNo === 0) {
data.name = item;
} else {
data.y = parseFloat(item);
}
});
options.series[0].data.push(data);
});
// Create the chart
var chart = new Highcharts.Chart(options);
});
});
});
РЕДАКТИРОВАТЬ 2Это формат, из которого извлекается диаграмма — очень простой, имя категории и значение с после каждого.
Coffee, 4.08
Dining Out, 5.05
Dining: ODU, 5.97
Dining: Work, 38.41
Entertainment, 4.14
Gas, 79.65
Groceries, 228.23
Household, 11.21
Misc, 12.20
Snacks, 20.27
Решение
РЕДАКТИРОВАТЬ:Ответ ниже более правильный!
https://stackoverflow.com/a/8408466/387285
http://www.highcharts.com/ref/#series-object
HTML:
<SELECT id="list">
<OPTION VALUE="A">Data Set A
<OPTION VALUE="B">Data Set B
</SELECT>
<button id="change">Refresh Table</button>
<div id="container" style="height: 400px"></div>
Javascript:
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'spline'
},
series: []
};
$("#change").click(function() {
if ($("#list").val() == "A") {
options.series = [{name: 'A', data: [1,2,3,2,1]}]
// $.get('/dough/includes/live-chart.php?mode=month'
} else {
options.series = [{name: 'B', data: [3,2,1,2,3]}]
// $.get('/dough/includes/live-chart.php?mode=newmode'
}
var chart = new Highcharts.Chart(options);
});
Это очень простой пример, поскольку у меня здесь нет файлов, но основная идея заключается в том, что каждый раз, когда пользователь выбирает новые параметры для того, что он хочет видеть, вам придется заменить объект данных .series. с новой информацией с вашего сервера, а затем воссоздайте диаграмму, используя новый Highcharts.Chart();.
Надеюсь это поможет!Джон
РЕДАКТИРОВАТЬ:
Посмотрите это, это из того, над чем я работал раньше:
$("table#tblGeneralInfo2 > tbody > tr").each(function (index) {
if (index != 0) {
var chartnumbervalue = parseInt($(this).find("td:last").text());
var charttextvalue = $(this).find("td:first").text();
chartoptions.series[0].data.push([charttextvalue, chartnumbervalue]);
}
});
У меня была таблица с информацией в первом и последнем tds, которую мне нужно было добавить в круговую диаграмму.Я перебираю каждую строку и ввожу значения.Примечание:Я используюcharoptions.series[0].data, поскольку в круговых диаграммах есть только 1 серия.
Другие советы
Другие ответы мне не помогли.Я нашел ответ в их документации:
http://api.highcharts.com/highcharts#Series
Используя этот метод (см. пример JSFiddle):
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
// the button action
$('#button').click(function() {
chart.series[0].setData([129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4] );
});
Вам необходимо очистить старый массив, прежде чем вводить новые данные.Есть много способов сделать это, но я использовал этот:
options.series[0].data.length = 0;
Итак, ваш код должен выглядеть так:
options.series[0].data.length = 0;
$.each(lines, function(lineNo, line) {
var items = line.split(',');
var data = {};
$.each(items, function(itemNo, item) {
if (itemNo === 0) {
data.name = item;
} else {
data.y = parseFloat(item);
}
});
options.series[0].data.push(data);
});
Теперь при нажатии кнопки старые данные удаляются, и должны отображаться только новые данные.Надеюсь, это поможет.
На самом деле, возможно, вам следует выбрать функцию update лучше.
Вот документ функции update http://api.highcharts.com/highcharts#Series.update
Вы можете просто ввести код, как показано ниже:
chart.series[0].update({data: [1,2,3,4,5]})
Этот код объединит параметр происхождения и обновит измененные данные.
Правильный ответ:
$.each(lines, function(lineNo, line) {
var items = line.split(',');
var data = {};
$.each(items, function(itemNo, item) {
if (itemNo === 0) {
data.name = item;
} else {
data.y = parseFloat(item);
}
});
options.series[0].data.push(data);
data = {};
});
Вам нужно очистить массив данных.
data = {};
Если вы являются использование push для динамической отправки данных в option.series..просто используй
options.series = [];
чтобы очистить его.
options.series = [];
$("#change").click(function(){
}
Вы всегда можете загрузить данные в формате JSON.
здесь я определил диаграмму как пространство имен
$.getJSON('data.json', function(data){
Chart.options.series[0].data = data[0].data;
Chart.options.series[1].data = data[1].data;
Chart.options.series[2].data = data[2].data;
var chart = new Highcharts.Chart(Chart.options);
});
data = [150,300]; // data from ajax or any other way
chart.series[0].setData(data, true);
А setData вызовет метод перерисовки.
