Wie update highcharts.js Diagramm auf ausgewählte Änderung mit Daten aus CSV-Datei (en)?

Question

Ich arbeite mit highcharts.js, und wird letztlich eine Reihe von Diagrammen haben, die basierend auf einem ausgewählten Auswahlwert geändert werden müssen. Alle verschiedenen Diagramme werden im endgültigen Produkt aus CSV-Dateien gelesen. Hier

ist ein Beispiel Geige: https://jsfiddle.net/o0d3mpnb/1/

Und hier ist der Code, den ich in dem letzten Projekt mit bin aus der csv ziehen:

$(function() { 
    Highcharts.setOptions({ 
     lang: { 
      decimalPoint: '.', 
      thousandsSep: ',' 
     } 
    }); 

    $.get('/procurement/reports/voucher-total-dollar.csv', function(csv) { 
     $('#donut-1').highcharts({ 
      credits: { 
       enabled: false 
      }, 
      chart: { 
       type: 'column', 
       height: 300 
      }, 
      title: { 
       text: 'VOUCHERS TOTAL $ AMOUNT',   
       xAxis: { 
       categories: [ 
        'Totals'        
       ], 
       crosshair: true 
      }, 
      yAxis: {     
       title: { 
        text: 'Total' 
       } 
      }, 
      legend: { 
       enabled: true 
      }, 
      tooltip: {    
       pointFormat: 'Total: <b>${point.y}</b>' 
      }, 
      data: { 
       csv: csv,    
       firstRowAsNames: true 
      } 
     }); 
    }); 
}); 

ich herausgefunden habe, wie die Daten aktualisieren und zeichnen Sie das Diagramm abhängig vom Wert der ausgewählten Auswahl neu. Was ich nicht herausgefunden habe, ist, wie man zum ursprünglichen Datensatz zurückkehrt, wenn die "Alle" -Option ausgewählt ist.

Zum Zweck der Freigabe zieht der Code die ursprünglichen "csv-Daten" aus einer ID im Dokument, dies muss jedoch eventuell eine externe Datei sein, wie im obigen Code.

Also meine Frage ist zweifach:

1. Wie zurückkehren ich aus der ursprünglichen CSV-Datei auf die Daten zurück, wenn die „alle“ wählen Sie die Option gewählt wird? und

2. Wie lade ich die aktualisierten Daten aus anderen CSV-Dateien als aus Daten-Array, die derzeit in der Jquery ist?

Ich habe ziemlich neu in Jquery und noch nie highcharts vor diesem Projekt verwendet, und wurden durch das alles bis jetzt einfach Stolper meinen Weg. Jede Hilfe würde sehr geschätzt werden. Vielen Dank!!

Answer 1

Als Reaktion auf 1: Sie werden einen anderen Zustand in Ihrem $(...).change hinzufügen müssen:

else if (travelOption == 'all') { 
    chart.series[0].setData([ /* insert data here */ ]); 
    chart.redraw(); 
} 

ich dies tun würde, indem eine Funktion erstellen, die die kartierten Daten aktualisiert, dann ist es für die Daten aufrufen.

function updateSeries(data) { 
    ... 
} 

switch (travelOption) { 
    case 'all': 
     updateSeries(add(series1, series2)) 
     break 
    ... 
} 

Als Reaktion auf 2: vorausgesetzt, Sie Web-Entwicklung tun, müssen Sie eine AJAX-Anforderung vom Server machen, siehe zum Beispiel: How to read data From *.CSV file using javascript?