关于C3.js图表​​数据拆分

Question

由于我不熟悉C3.js库,当我试图拆分数组数据时,我有点困惑.

对于即时我有一些来自json的数组值.

    var jsondata=[[123],[45],[56],[22]];

   var jsondataName=[["apple"],["orange"],["banana"],["pear"]];

我试图将第一个数组jsondata传递到图表中,但这些值进入同一列,这不是我想看到的.

我希望这些数组值成为独立数据并将名称推入其中

请参阅我制作的演示:http: //jsfiddle.net/q8h39/92/

我想要的结果应该是这样的

更新json数据格式:

  "Name": apple,
    "data": {
        "value": 1434,
        }
  "Name": banana,
    "data": {
        "value": 342,
        }

    }
}

Answer 1

您可以将 JSON 对象设置为data.json，然后设置data.keys.value为该 JSON 中的值数组：

var jsondata = [{
  "Name": "apple",
  "data": {
    "value": 1434,
  },
}, {
  "Name": "banana",
  "data": {
    "value": 342,
  }
}];

var chart = c3.generate({
  data: {
    json: jsondata,
    keys: {
      value: [
        "name", "data.value"
      ]
    },
    type: "scatter"
      //hide: true
  }
});

http://jsfiddle.net/aendrew/mz9ccbrc/

注意，您需要 C3 v0.4.11（刚刚添加了点语法keys.value），并且您的 JSON 对象需要是一个数组（当前它无效）。

如果您想将最初问题中的两个数组转换为 JSON 格式，请尝试以下操作：

d3.zip(jsondataName, jsondata)
.map((d) => Object({name: d[0][0], data: { value: d[1][0] } }));