So laden Sie mehr als eine CSV mit Highcharts-Datenmodul

Question

Ich versuche, mehrere CSV-Dateien in einem Diagramm zu laden, so dass ich Drilldowns verwenden kann. Ich kann keinen einzelnen csv mit mehreren Spalten verwenden, da jeder Datensatz unterschiedliche Mengen an Beobachtungen oder Zeilen enthält. Ich habe herausgefunden, wie man mehr als einen csv mit verschachtelten $ .get() - Funktionen lädt. Highcharts zeichnet jedoch nur den letzten referenzierten Datensatz auf. Ich habe versucht, den Code in drei verschiedenen Versionen zu schreiben, aber alle werden nur den letzten Datensatz darstellen, auf den verwiesen wird. Ich habe Highcharts-Dokumentation recherchiert, aber nichts gefunden, was meine Anforderungen erfüllt.

Ich benutze Highcharts Datenmodul, um die CSV zu laden, weil es einfach ist. Ich bin jedoch offen für andere Lösungen, die eine Dateianalyse erfordern. Im Folgenden sind Beispiele der drei verschiedenen Versionen, die ich versuchte:

$.get('pref.csv', function(data1) { 
    $.get('create.csv', function(data2) { 
     $(chartID).highcharts({ 
      data: { 
       csv: data2, data1 
      }, 
      chart: { 
       type: 'bar' 
      } 
     }); 
    }); 
}); 

Oder

$.get('pref.csv', function(data1) { 
    $.get('create.csv', function(data2) { 
     $(chartID).highcharts({ 
      data: { 
       csv: data2, 
       csv: data1 
      }, 
      chart: { 
       type: 'bar' 
      } 
     }); 
    }); 
}); 

Oder

$.get('pref.csv', function(data1) { 
    $.get('create.csv', function(data2) { 
     $(chartID).highcharts({ 
      data: { 
       csv: data1 
      }, 
      data: { 
       csv: data2 
      }, 
      chart: { 
       type: 'bar' 
      } 
     }); 
    }); 
}); 

Vielen Dank im Voraus!

UPDATE Dies ist die Lösung zum Laden von zwei oder mehr CSV-Dateien für die Verwendung in einem Liniendiagramm mit Daten auf der xAxis.

data.csv 
Date,Mean 
2001-01-01,0 
2001-02-01,2.9 
2001-03-01,12.9 
2001-04-01,27.2 
2001-05-01,38.5 
2001-06-01,43.9 
2001-07-01,40.7 
2001-08-01,45.8 
2001-09-01,50.6 

data2.csv 
Date,Mean 
2001-01-01,2 
2001-02-01,1.6 
2001-03-01,8.2 
2001-04-01,13.6 
2001-05-01,15.6 
2001-06-01,17.1 
2001-07-01,15.8 
2001-08-01,17 
2001-09-01,13.3 

function parseCSV(csvFile) { 
    // empty array for storing the chart data 
    var data = []; 
    // Split the lines 
    var lines = csvFile.split('\n'); 
    // Iterate over the lines and add categories or series 
    $.each(lines, function(lineNo, line) { 
     if (lineNo != 0) { 
      var items = line.split(','); 
      // Insert date and player count into the series 
      data.push([Date.parse(items[0]), parseFloat(items[1])]); 
     } 
    }); 
    return data 
} 


$.get('data.csv', function(data1) { 
    $.get('data2.csv', function(data2) { 
     // parse data1 
     var series1 = parseCSV(data1) 
      // parse data2 
     var series2 = parseCSV(data2) 

     $('container').highcharts({ 
      chart: { 
       type: 'spline' 
      }, 
      series: [{ 
       data: series1 
      }, { 
       data: series2 
      }], 
     }); 

    }); 
}); 

Answer 1

Das Modul data.js erwartet eine einzelne Datei. Also müssen Sie zwei oder mehr Dateien mit ajax laden (durch $ .get wie Sie haben). Bereiten Sie dann das benutzerdefinierte Parsen vor und erstellen Sie eine Struktur des Reihen-Arrays.

Handbuch:

• http://www.highcharts.com/docs/working-with-data/custom-preprocessing