2016-04-11 3 views
0

Ich entwickle eine Web-App und benutze das JS Highcharts Plugin, um mir einige Diagramme zu zeichnen. Manchmal lade ich eine CSV-Datei mit mehr als 100 000 Zeilen mit 4 Spalten.Highcharts Downsampling - CSV

Offensichtlich trifft das Diagramm-Plugin einige Probleme. Also kann ich meine CSV-Datei nicht direkt downsampeln, aber ich habe ein Downsampling-Highcharts-Plugin gefunden (http://www.highcharts.com/plugin-registry/single/13/Highcharts-Downsample), das die Aufgabe erfüllt!

Aber in der Tat, dieses Plugin kann nur eine Serie mit einem Schwellenwert initialisieren .. Und ich weiß nicht, wie diese Methode auf meiner Reihe von CSV ..

Ich lade meine CSV so geladen anzuwenden statt „Serie“ -Attribut vom Plug-Usage angegeben:

data: {csv: csv}, 

Das Plugin doc sagt uns, es so zu verwenden:

series: [{ 
    downsample: { 
    threshold: 1000 // 0 disables downsampling for this series. 
    }, 
    data: // Your data (array of arrays with two values or array of numerical values) 
}] 

Aber ich weiß nicht „Serie“ -Attribut verwenden becaus e ich meine Serie aus einer CSV-Datei direkt geladen werden ..

Also, ich möchte eine Lösung zu finden, meine CSV-Datei mit dieser Neuberechnung Hicharts Plugin Downsampling ..

Sie so viel Dank!

Antwort

0

Also endlich, ich fand eine Lösung! Ich Parsing meine CSV-Datei selbst und ich kann das Downsample-Attribut angeben:

var options = {      //Initialize my chart's option 
       chart: { 
        zoomType: 'x', 
        renderTo: $('#chart-'+unused)[0] 
       }, 
       title: { 
        text: elem.title 
       }, 
       credits: { 
        enabled: false 
       }, 
       xAxis: { 
        categories: [], //initialize empty category array 
        type: "line" 
       }, 
       yAxis: { 
        title: { 
         text: "milli-SI" 
        } 
       }, 
       series: [] //initialize empty serie array 
      }; 

var lines = csv.split('\n'); 
$.each(lines, function(lineNo, line) { 
    var items = line.split(','); 
    if (lineNo == 0) { 
     $.each(items, function(itemNo, item) { 
      if (itemNo > 0) { 
       var series = { 
        data: [], 
        name: item, 
        downsample : {threshold: 2000} //initialize downsample for a specific serie 
       }; 
       options.series.push(series); 
      } 
     }); 
    } 

    else { 
     $.each(items, function(itemNo, item) { 
      if (item.length == 0) 
       return; 
      if (itemNo == 0) { 
       options.xAxis.categories.push(item); 
      } else { 
       options.series[itemNo -1].data.push(parseFloat(item)); 
      } 
     }); 
    } 

}); 
var chart = new Highcharts.Chart(options);