Lesen von CSV-Dateien mit c3.js

Als neuer Webentwickler möchte ich CSV-Daten von c3.js visualisieren. Ich habe in ihre Beispiele sah, und es gelang ihm bisher mit Daten manuell von Hand eingegeben wie folgt:Lesen von CSV-Dateien mit c3.js

<!DOCTYPE html> 
<html> 
<html lang="en"> 
<head> 
    <title>Visualisation test</title> 
    <meta charset="utf-8" /> 
     <link href="libs/c3.min.css" rel="stylesheet" /> 
    <script src="libs/d3.min.js"></script> 
    <script src="libs/c3.min.js"></script> 
</head> 

    <body> 
    <p> <b> The chart is displayed below: </b> </p> 
    <div id="chart"></div> 
    <script> 

    var chart = c3.generate({ 
    data: { 
     columns: [ 
      ['data1', 30, 200, 100, 400, 150, 250, 30, 200, 100, 400], 
      ['data2', 130, 100, 140, 200, 150, 50, 130, 100, 140, 200],    
     ], 
     type: 'bar' 
    }, 
    bar: { 
     width: { 
      ratio: 0.5 
     } 
    }, 
    axis: {rotated : true} 
}); 

    </script> 
    <p> End of Chart </p> 
    </body> 
</html>

Aber die Daten aus einer CSV-Datei zu lesen zeigt nichts an. Die Art, wie ich tat, war von remplacing den Datenabschnitt mit dem folgenden Code:

data: { 
     url: '/path/to/my/file.csv', 
     type: 'line' 
    }

Mein CSV-Datei Inhalt:

data1,data2 
120,80 
140,50 
170,100 
150,70 
180,120

Vielen Dank für Ihre Hilfe.

Quelle

2016-07-02 Madhatter

einfach das Problem gefunden. Stellen Sie sicher, ad Blocker Erweiterungen zu deaktivieren ...

Quelle

2016-07-02 17:34:49 Madhatter

-4

Sie können die Datei mit PHP lesen:

PHP CSV string to array

dann json_encode die Ausgabe und verwenden Sie es in Ihren Spalten-Array.

Quelle

2016-07-02 00:33:15 wodi

Sie haben wahrscheinlich ein Problem mit Ihrem Weg, weil Ihr Snippet der richtige Weg ist, eine externe CSV-Datei in C3 zu laden:

data: { 
    url: 'data.csv', 
    type: 'bar' 
},

Dies ist ein plunkr mit Ihrem Code ist, und Ihre Daten geladen wird von eine CSV-Datei, überprüfen sie es: https://plnkr.co/edit/moRdOmyeMkb533XJHyoY?p=preview

Dies ist die Dokumentation: http://c3js.org/samples/data_load.html

Quelle

2016-07-02 09:30:10

Dies ist wirklich komisch, weil mein Weg richtig ist. – Madhatter

In der Tat. Wie Sie sehen können, arbeitet der Plunker mit einer externen CSV. Geht dein Pfad zu einer anderen Domain? –

absolut nicht. Mein Pfad ist 'data.csv' und die Datei befindet sich im selben Ordner. – Madhatter

Antwort

Verwandte Themen