Reload Diagrammdaten über JSON mit Highcharts
https://stackoverflow.com/questions/4210879
-
25-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ich versuche, die Daten für einen Highcharts Diagramm über JSON auf eine Schaltfläche auf Basis neu zu laden klicken Sie an anderer Stelle in der Seite. Zunächst würde Ich mag einen Standardsatz von Daten angezeigt wird (nach Kategorie Ausgaben), aber dann neue Daten auf Benutzereingaben (Ausgaben für Monat, zum Beispiel) basierten laden. Der einfachste Weg, ich von dem Ausgang der JSON vom Server denken kann, ist durch eine GET-Anfrage an der PHP-Seite vorbei, zum Beispiel $. Beziehen ( ‚/ Teig / includes / Live-chart.php? Mode = Monat‘ , das Abrufen dieses Werts aus der ID-Attributs-Taste.
Hier ist, was ich bisher die Standarddaten abzurufen (nach Kategorie Ausgaben). Nötige zu finden, wie völlig andere Daten in das Kreisdiagramm zu laden, basierend auf Benutzereingaben, auf Anfrage:
$(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);
});
});
Jede Hilfe wäre sehr geschätzt
Bearbeiten
Hier ist die aktualisierten Javascript dank Robodude. John, Sie haben mich auf dem richtigen Weg hier - danke! Ich bin jetzt stecken zu bleiben mit, wie die Daten auf der Karte von der AJAX-Anforderung zu ersetzen. Ich muss zugeben, dass der Code nach dem $ .get () ist höchstwahrscheinlich von Beispielcode, ich verstehe nicht ganz, was los ist, wenn es ausgeführt wird - vielleicht gibt es einen besseren Weg, um die Daten zu formatieren?
Ich konnte einige Fortschritte bei, dass das Diagramm nun neue Datenlasten machen, aber es wird hinzugefügt auf, was schon da ist. Ich vermute, dass der Täter diese Zeile:
options.series[0].data.push(data);
Ich habe versucht options.series [0] .setData (Daten); aber nichts passiert. Auf der hellen Seite, fehlerlos die AJAX-Request Arbeiten auf dem Wert des Auswahlmenüs basiert und es gibt keine Javascript-Fehler. Hier ist der Code in Frage, sans Chart Optionen:
$.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);
});
});
});
EDIT 2 Dies ist das Format, dass das Diagramm zieht aus -. Sehr einfach, Kategorienamen und den Wert mit \ n nach jedem
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
Lösung
EDIT: Die Antwort unten ist richtiger
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);
});
Dies ist ein sehr einfaches Beispiel, da ich meine Dateien nicht hier bei mir haben, aber die Grundidee ist, dass jedes Mal die neuen Optionen wählt Benutzer für die Dinge, die sie sehen wollen, Sie gehen die haben zu ersetzen. Serie Datenobjekt mit den neuen Informationen von Ihrem Server und dann erstellen Sie das Diagramm, das die neue Highcharts.Chart mit ();.
Hope, das hilft! John
EDIT:
Überprüfen Sie diese heraus, seine von etwas, das ich auf in der Vergangenheit gearbeitet habe:
$("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]);
}
});
hatte ich eine Tabelle mit Informationen in dem ersten und letzten tds, dass ich auf das Kreisdiagramm hinzuzufügen, benötigt. I Schleife durch jede der Zeilen und Schubs in den Werten. Hinweis: Ich verwende chartoptions.series [0] .data seit Tortendiagramme haben nur 1 Serie
.Andere Tipps
Die anderen Antworten nicht für mich arbeiten. Ich fand die Antwort in ihrer Dokumentation:
http://api.highcharts.com/highcharts#Series
Mit dieser Methode ( JSFiddle Beispiel ):
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] );
});
Sie müssen das alte Array löschen, bevor Sie die neuen Daten in Push Es gibt viele Möglichkeiten, dies zu tun, aber ich verwendet, um dieses ein.
options.series[0].data.length = 0;
So Ihr Code soll wie folgt aussehen:
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);
});
Wenn nun die Taste, um die alten Daten angeklickt wird, wird gelöscht und nur die neuen Daten zeigen, sollen auf. Ich hoffe, das hilft.
Eigentlich sollten Sie vielleicht die Funktion update wählen besser.
Hier ist das Dokument der Funktion update http://api.highcharts.com/highcharts#Series.update
Sie können nur Code eingeben, wie unten:
chart.series[0].update({data: [1,2,3,4,5]})
Diese Code wird die Herkunft Option fusionieren, und aktualisieren Sie die geänderten Daten.
Die richtige Antwort lautet:
$.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 = {};
});
Sie müssen die ‚Daten‘ Array spülen.
data = {};
Wenn Sie sind über Push der Daten an die option.series dynamisch zu drücken .. nur verwenden
options.series = [];
es zu löschen.
options.series = [];
$("#change").click(function(){
}
Sie können jederzeit ein JSON-Daten laden
hier definiert i-Diagramm als Namespace
$.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);
Die setData wird redraw Methode aufrufen.
Referenz: http://api.highcharts.com/highcharts/Series.setData
