zeigen mehrere Datensätze in C3.js Liniendiagramm

Question

Ich habe folgende json:

[ 
    {"data"=>"data1", "value1"=>10, "value2"=>6, "day"=>"05-20-2016"}, 
    {"data"=>"data1", "value1"=>17, "value2"=>10, "day"=>"05-21-2016"}, 
    {"data"=>"data1", "value1"=>12, "value2"=>8, "day"=>"05-22-2016"}, 
    {"data"=>"data2", "value1"=>5, "value2"=>1, "day"=>"05-20-2016"}, 
    {"data"=>"data2", "value1"=>11, "value2"=>3, "day"=>"05-21-2016"}, 
    {"data"=>"data2", "value1"=>25, "value2"=>18, "day"=>"05-22-2016"} 
] 

Was ich will, ist, diese Werte in einem Liniendiagramm mit C3.js anzuzeigen und eine separate Zeile für jeden Wert haben. Ausgehend vom Beispiel möchte ich eine Zeile für data1 und value1, eine Zeile für data1 und value2, eine Zeile für data2 und value1, eine Zeile für data2 und value2 und in der Legende den Wert1> haben Daten1, Daten2 und Wert2> Daten1, Daten2 (jede Datenzeile hat eine andere Farbe).

Gerade jetzt, wenn ich dies in C3.js laden, zeigt es mir nur 2 Zeilen (eine für data1 und eine für data2).

Kann mir jemand genau zeigen, wie man das macht?

Answer 1

Dies ist ein Datum Gerangel Übung, dass Sie Daten machen wollen wie

{"data"=>"data1", "value1"=>10, "value2"=>6, "day"=>"05-20-2016"}, 
... 
{"data"=>"data2", "value1"=>5, "value2"=>1, "day"=>"05-20-2016"}, 

in so etwas wie

{"data1value1"=>10, "data1value2"=>6, 
"data2value1"=>17, "data2value2"=>10, "key"=>"05-20-2016"}, 

Dies kann wie folgt erreicht werden:

var json = [ 
    {"data":"data1", "value1":10, "value2":6, "day":"05-20-2016"}, 
    {"data":"data1", "value1":17, "value2":10, "day":"05-21-2016"}, 
    {"data":"data1", "value1":12, "value2":8, "day":"05-22-2016"}, 
    {"data":"data2", "value1":5, "value2":1, "day":"05-20-2016"}, 
    {"data":"data2", "value1":11, "value2":3, "day":"05-21-2016"}, 
    {"data":"data2", "value1":25, "value2":18, "day":"05-22-2016"} 
]; 


var valFields = ["value1", "value2"]; 
var dataIndexField = "data"; 
var keyField = "day"; 
var newMap = {}; // new data will be built up in here 
json.forEach (function (d) { 
    // get new data obj for key, which in this case is the day value 
    var key = d[keyField]; 
    var newObj = newMap[key]; 
    if (!newObj) { // make the obj if it doesn't exist 
     newObj = {key: key}; 
     newMap[key] = newObj; 
    } 

    // in this obj merge the dataIndexField and valFields to make new datapoints 
    var dataIndex = d[dataIndexField]; // either data1 or data2 
    valFields.forEach (function (vField) { // vfield will loop value1 then value2 
     newObj[dataIndex+vField] = d[vField]; // data1/2value1/2 = the value of value1/2 
    }); 
}); 
var newJson = d3.values(newMap); // array of objs suitable for c3 
// dataFields are the names of the new datapoint properties minus 'key' 
var newDataFields = d3.keys(newJson[0]); 
newDataFields.splice (newDataFields.indexOf("key"), 1); 



var chart = c3.generate({ 
    data: { 
     json: newJson, 
     keys: { 
      x: 'key', 
      value: newDataFields 
     } 
    }, 
    axis: { 
    x: { 
     type: 'category' 
    } 
    } 
}); 

http://jsfiddle.net/w7o8k40q/3/

Das Bit in der Mitte führt die Werte data1/2 und value1/2 wie gewünscht zusammen und fügt sie in Objekte mit einem eindeutigen Schlüssel ein, in diesem Fall aus dem Tag-Feld jeder Zeile. Die Json.stringified Ausgabe von newJson ist wie so:

[ 
    {"key":"05-20-2016","data1value1":10,"data1value2":6,"data2value1":5,"data2value2":1}, 
    {"key":"05-21-2016","data1value1":17,"data1value2":10,"data2value1":11,"data2value2":3}, 
    {"key":"05-22-2016","data1value1":12,"data1value2":8,"data2value1":25,"data2value2":18} 
] 

Diese für c3 genug ist, wenn Sie es sagen, welche Eigenschaften in jeder Zeile Daten sind (was newDataFields tut) und welches ist der Schlüssel für die x Wert (PS wie wir Schlüssel als kategorischen Wert interpretieren müssen Sie möglicherweise die JSON durch das Schlüsselfeld sortieren, so dass die Tage nicht in der Reihe erscheinen - zum Glück begegnen wir ihnen im ursprünglichen Datensatz)