javascript - 关于 C3.js 图表数据拆分

Question

由于我不熟悉 C3.js 库，所以在尝试拆分 Array 数据时我有点困惑。

我现在有一些来自 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/

n.b.，为此您需要 C3 v0.4.11(刚刚添加了 keys.value 的点语法)，并且您的 JSON 对象需要是一个数组(目前它无效)。

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

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