在 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 在折线图中显示这些值，并为每个值单独一行。

根据这个例子，我想要一行数据 1 和值 1，一行数据 1 和值 2，一行数据 2 和值 1，一行数据 2 和值 2，在图例中我想要值 1 > Data1、Data2 和 Value2 > Data1、Data2（每条数据线有不同的颜色）。

现在，当我在 C3.js 中加载它时，它只会显示 2 行（一行用于数据 1，另一行用于数据 2）。

谁能告诉我具体怎么做？

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/

基本上，中间的位会像您询问的那样合并 data1/2 和 value1/2 数字，并将它们添加到具有唯一键的对象中，在本例中取自每一行的日期字段. newJson 的 Json.stringified 输出是这样的：

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

如果你告诉它每一行中的哪些属性是数据（这就是 newDataFields 所做的）以及哪一个是 x 值的键（PS 因为我们将键解释为分类值，您可能需要按键字段对 json 进行排序，这样日期就不会乱序出现——幸运的是我们在原始数据集中按顺序遇到它们）

在 C3.js 折线图中显示多个数据集

show multiple data sets in C3.js line chart

json

c3.js