2017-09-12 5 views
1

Ich habe eine Highmap, die mit Daten aufgefüllt wird, die mit getJSON abgerufen werden. Was ich erreichen möchte, ist eine Schaltfläche (oder Dropdown), die es mir ermöglicht, zwischen zwei oder mehr Datensätzen zu wechseln.Wie kann ich mithilfe von setData zwischen JSON-Datensätzen in HighMaps wechseln?

Ich habe diese Frage ein paar Mal auf verschiedene Arten gefragt (wie this one), und die Antworten zu lesen, denke ich habe eine allgemeine Vorstellung von dem, was ich tun muss, aber ich bleibe stecken. FWIW Ich bin ein absoluter Neuling, der nur versucht, etwas für meine Kollegen zum Laufen zu bringen, also könnte mein Fehler grundlegend sein oder könnte nur eine Frage der Syntax sein.

Um mir jetzt zu beweisen, dass ich es zum Laufen bringen kann, habe ich versucht, eine Schaltfläche zu implementieren, die mit setData einfach auf einen zweiten Datensatz umschaltet. Während die Map korrekt angezeigt wird und ich weiß, dass beide JSON-Dateien geladen werden, kann ich den Switch nicht zum Laufen bringen.

Hier ist mein Versuch, in voller Länge: http://jsfiddle.net/osc9m3e7/4/

Und der Teil, ich bin sicher, ist falsch irgendwie:

$('#setdata').click(function() { 
Highcharts.mapChart.series[0].setData(data1); 
}); 

ich irgendwelche Tipps schätzen würde mich auf dem richtigen Weg zu bekommen.

+0

ich um ein wenig mit Ihrer Geige gespielt und denke, es ist je nachdem, welche Datenmenge gewünscht wird geladen. Dies ist in keiner Weise eine saubere und nette Art, dies zu tun, weshalb ich dies nicht als Antwort poste. http://jsfiddle.net/osc9m3e7/2/. Dein Code war in der Geige nicht vollständig. Zumindest konnte ich die Funktion, die du oben gepostet hast, nirgends in der Geige finden. Ich denke, das Hauptproblem besteht darin, dass Sie 'setData' nicht für das von Ihnen erstellte Highchart-Objekt verwenden, sondern stattdessen für ein nicht ausgeführtes Highchart-Objekt. Deshalb habe ich die "Chart" -Variable in der Geige gemacht, die ich gepostet habe. – ewolden

+0

Danke für die Antwort! Mein Fehler, ich postete die falsche Geige. Ich habe die obige Frage bearbeitet. Ich habe auch versucht, setData auf dem Diagramm selbst zu verwenden, indem Sie dem Diagramm einen Variablennamen geben, wie Sie in Ihrem Link vorschlagen, aber das scheint das Problem nicht gelöst zu haben. – Moss

+0

Hier ist ein Arbeitsbeispiel, das ich zu replizieren versuchte, aber es verwendet wirklich nur einen Datensatz (den er dann zufällig ändert): http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/maps/members/series-setdata/ – Moss

Antwort

0

Sie haben wahrscheinlich bemerkt, wie die Grenzen von Ländern Verdickungen jedes Mal, wenn neue Daten gesetzt. Es passiert, weil das Datenobjekt nicht kopiert, sondern direkt verwendet wird, also geändert wird. Um ein bestimmtes Objekt zu kopieren, können Sie beispielsweise die Funktion slice() verwenden. Im Folgenden finden Sie ein Beispiel, bei dem das Wechseln zwischen Datensätzen so funktioniert, wie es sollte.

API-Referenz:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

Beispiel:
http://jsfiddle.net/4ub0z408/

+0

Ich hatte das bemerkt und untersuchte, warum es passierte. Ihre Antwort kam zu einer perfekten Zeit. Ich habe den Fix implementiert, danke! – Moss

0

Beantwortet von ewolden in den Kommentaren. Mein Problem war, dass ich das Diagramm nicht benannte und daher nicht mit setData manipulieren konnte. Das Ausführungsbeispiel ist jetzt hier: http://jsfiddle.net/osc9m3e7/7/

var AccessMap = Highcharts.mapChart('container', { 
... 
$('#setdata').click(function() { 
AccessMap.series[0].setData(data2); 
}); 
Verwandte Themen