показать несколько наборов данных в C3.js линии диаграммы

Question

я следующие: 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"} 
] 

То, что я хочу, чтобы отобразить эти значения в виде графика с C3.js и имеют отдельную строку для каждого значения.

На основании этого примера я хочу иметь одну строку для data1 и value1, одну строку для data1 и value2, одну строку для data2 и value1, одну строку для data2 и value2, а в легенде я хочу иметь Value1> Data1, Data2 и Value2> Data1, Data2 (каждая строка данных имеет другой цвет).

Прямо сейчас, когда я загружаю это в C3.js, он отобразит только 2 строки (один для data1 и один для data2).

Может ли кто-нибудь показать мне, как это сделать?

Answer 1

Это данные пререканий упражнения в том, что вы хотите, чтобы включить данные, такие как

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

в нечто вроде

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

Это может быть достигнуто, как это:

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/

В основном бит в середине объединяет данные1/2 и значения1/2, как вы просили, и добавляет их в объекты с уникальным ключом, в этом случае взятые из поля дня каждой строки. Выход Json.stringified из newJson как так:

[ 
    {"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} 
] 

Этого достаточно для c3, если вы указать, какие свойства в каждой строке есть данные (что newDataFields делает), и который один является ключевым для х значение (PS, поскольку мы интерпретируем ключ как категорическое значение, которое вам может понадобиться для сортировки json по ключевому полю, чтобы дни не появлялись вне очереди - к счастью, мы сталкиваемся с ними по порядку в исходном наборе данных)