javascript 为 C3.js 格式化 JSON
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27695206/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Formatting JSON for C3.js
提问by Mike
I have a specific JSON output that I need to convert into x and y-axis for a C3.js line graph but it doesn't seem to like the way it's currently formatted:
我有一个特定的 JSON 输出，我需要将其转换为 C3.js 折线图的 x 和 y 轴，但它似乎不喜欢它当前的格式：
{
"results": [
{
"param": "x",
"val": [
1,
2,
3,
4
]
},
{
"param": "y",
"val": [
2,
3,
5,
6
]
}
]
}
What the best way to transform this (using JS) so that it can be read by C3.
转换它（使用 JS）以便它可以被 C3 读取的最佳方法是什么？
Ultimately I'm going to upload multiple xy line charts so I'm guessing it's going to have to be something like this sample code, but instead pulling it from json:
最终，我将上传多个 xy 折线图，所以我猜它必须类似于此示例代码，而是从 json 中提取它：
var chart = c3.generate({
data: {
url: '/sampleJSON',
mimeType: 'json',
xs: {
'param-y': 'param-x',
'data2': 'x2', //not sure how to name these ones differently on load, but this is a different issue
},
columns: [
['param-x', 1, 2, 3, 4],
['param-y', 2, 3, 5, 6],
['x2', 30, 50, 75, 100, 120], //again just placeholder to eventually have other data
['data2', 20, 180, 240, 100, 190] //again just placeholder to eventually have other data
]
}
});
回答by Mark
Instead of using c3to make the json request, I'd just handle it in three steps.
我没有使用c3json 请求，而是分三步处理。
- Make the json call.
- Coerce the data to the structure
c3columnswants. - Create the chart.
- 进行 json 调用。
- 将数据强制到结构中
c3columns。 - 创建图表。
d3.json("sample.json", function(data) {
var modData = [];
data.results.forEach(function(d, i) {
var item = ["param-" + d.param];
d.val.forEach(function(j) {
item.push(j);
});
modData.push(item);
});
var chart = c3.generate({
data: {
columns: modData
}
});
});
Example here.
示例在这里。
回答by Mike
So Mark's answer does all the hard work, but I thought I'd add a slightly tweaked answer (to highlight my comment to his answer), because Marks's answer uses C3 to plot two independent graphs, the tweaked code below shows it plotting the objects in the JSON as x/y cordintes:
所以马克的回答完成了所有艰苦的工作，但我想我会添加一个稍微调整的答案（以突出我对他的答案的评论），因为马克的答案使用 C3 来绘制两个独立的图形，下面的调整代码显示它绘制了对象在 JSON 中作为 x/y 编码：
d3.json("sample.json", function(data) {
var modData = [];
data.results.forEach(function(d, i) {
var item = ["param-" + d.param];
d.val.forEach(function(j) {
item.push(j);
});
modData.push(item);
});
var chart = c3.generate({
data: {
xs: {
'param-y':'param-x'
},
columns: modData
}
});
});
You can see my slight edits to his example here
你可以在这里看到我对他的例子的轻微编辑
回答by Sam McGrail
I would use this page as reference: http://c3js.org/reference.html#data-keys
我会使用这个页面作为参考：http: //c3js.org/reference.html#data-keys
You can see how he specifies a separate area for the specific keys
你可以看到他如何为特定的键指定一个单独的区域
keys: {
// x: 'name', // it's possible to specify 'x' when category axis
value: ['upload', 'download'],
}
