C3-带有JSON和类别的Timeseries图表

我第一次使用C3库，我认为它是D3的一个很好的替代品，可以轻松地设计简单且可重用的图表

但是，我在设计timeseries图表时遇到了一些问题。 以下是我将用于生成图表的JSON文件示例：

data: {
  json: [
   {
      "city": "Paris",
      "date": "2016-09-01",
      "event": 234
   },
   {
      "city": "Paris",
      "date": "2016-09-02",
      "event": 891
   },
   {
      "city": "Paris",
      "date": "2016-09-03",
      "event": 877
   },
   {
      "city": "Berlin",
      "date": "2016-09-01",
      "event": 190
   },
   {
      "city": "Berlin",
      "date": "2016-09-02",
      "event": 234
   },
   {
      "city": "Berlin",
      "date": "2016-09-03",
      "event": 231
   },
   {
      "city": "London",
      "date": "2016-09-01",
      "event": 23
   },
   {
      "city": "London",
      "date": "2016-09-02",
      "event": 12
   },
   {
      "city": "London",
      "date": "2016-09-03",
      "event": 89
   },
 ],

问题是，我不能将轴x:设置为timeseries类型，将键“city”设置为类别类型

目前我有：

keys: {
   x: 'period',
   value: ['event'],
},
axis: {
 x: {
   type: 'timeseries',
   tick: {
     format: '%Y-%m-%d'
   }
 }
},
type: 'spline'

以及相应的Plunker：

我想要3条样条线，对应于从JSON文件检索到的3个城市

你能帮我做到这一点吗

---

非常感谢：）

您需要将数据整理成c3认为可以接受的格式，类似于这里的示例-->

对于您的，我们需要一系列条目，如

[{
    date = val
    London = val
    Paris = val
    Berlin = val
},
...
]

为此，我们需要操作原始json：

     var json = <defined here>

      // group json by date
      var nestedData = d3.nest().key(function(d) { return d.date; }).entries(json);
      var cities = d3.set();   // this keeps a record of the cities mentioned so we don't need to hard-code them later on
      // run through the dates and make new objects of city=entry pairs (and the date=whatever)
      // all stored in a new array (formattedData) which we can feed to the chart json argument
      var formattedData = nestedData.map (function (entry) {
        var values = entry.values;
        var obj = {};
        values.forEach (function (value) {
          obj[value.city] = value.event;
          cities.add(value.city);
        })
        obj.date = entry.key;
        return obj;
      });


      var chart = c3.generate({
        data: {json: formattedData,
            keys: {
                x: 'date', // it's possible to specify 'x' when category axis
                value: cities.values(),
            }
        },
...

var json=
//按日期分组
var nestedData=d3.nest（）.key（函数（d）{return d.date；}）；
var cities=d3.set（）；//这会记录所提到的城市，所以我们以后不需要硬编码
//运行日期并创建city=条目对的新对象（日期=任意值）
//所有数据都存储在一个新数组（formattedData）中，我们可以将该数组馈送到chart json参数
var formattedData=nestedData.map（函数（条目）{
var值=输入值；
var obj={}；
values.forEach（函数（值）{
obj[value.city]=value.event；
城市。增加（价值。城市）；
})
obj.date=entry.key；
返回obj；
});
var图表=c3.0({
数据：{json:formattedData，
关键点：{
x:'日期'，//当类别轴
值：cities.values（），
}
},
...

---

请参见编辑的plunkr，网址为

，您需要将数据整理成c3认为可以接受的格式，这类似于此处的示例-->

对于您的，我们需要一系列条目，如

[{
    date = val
    London = val
    Paris = val
    Berlin = val
},
...
]

为此，我们需要操作原始json：

     var json = <defined here>

      // group json by date
      var nestedData = d3.nest().key(function(d) { return d.date; }).entries(json);
      var cities = d3.set();   // this keeps a record of the cities mentioned so we don't need to hard-code them later on
      // run through the dates and make new objects of city=entry pairs (and the date=whatever)
      // all stored in a new array (formattedData) which we can feed to the chart json argument
      var formattedData = nestedData.map (function (entry) {
        var values = entry.values;
        var obj = {};
        values.forEach (function (value) {
          obj[value.city] = value.event;
          cities.add(value.city);
        })
        obj.date = entry.key;
        return obj;
      });


      var chart = c3.generate({
        data: {json: formattedData,
            keys: {
                x: 'date', // it's possible to specify 'x' when category axis
                value: cities.values(),
            }
        },
...

var json=
//按日期分组
var nestedData=d3.nest（）.key（函数（d）{return d.date；}）；
var cities=d3.set（）；//这会记录所提到的城市，因此我们以后不需要硬编码
//运行日期并创建city=条目对的新对象（日期=任意值）
//所有数据都存储在一个新数组（formattedData）中，我们可以将该数组馈送到chart json参数
var formattedData=nestedData.map（函数（条目）{
var值=输入值；
var obj={}；
values.forEach（函数（值）{
obj[value.city]=value.event；
城市。增加（价值。城市）；
})
obj.date=entry.key；
返回obj；
});
var图表=c3.0({
数据：{json:formattedData，
关键点：{
x:'日期'，//当类别轴
值：cities.values（），
}
},
...

---

查看编辑的plunkr，网址为

谢谢@mgraham，你让我开心！这正是我想要的：）感谢您的支持。这是一个很好的答案。考虑到我们在实际工作中可能会遇到这种情况的次数，这可能是C3.js库中的一个标准选项！谢谢@mgraham，您让我开心了！这正是我想要的：）感谢您的支持。这是一个很好的答案。考虑到我们在实际工作中可能会遇到这种情况的次数，这可能应该作为C3.js库本身的标准选项提供！