Javascript C3使用分类JSON数据创建条形图
如何为通过JSON加载数据的C3条形图指定x轴标签?我在文档中没有看到任何东西,我找到的最接近的是,但它只给出了以列格式指定的数据的示例,而我有以JSON格式指定的数据,如 我的尝试:Javascript C3使用分类JSON数据创建条形图,javascript,charts,c3.js,Javascript,Charts,C3.js,如何为通过JSON加载数据的C3条形图指定x轴标签?我在文档中没有看到任何东西,我找到的最接近的是,但它只给出了以列格式指定的数据的示例,而我有以JSON格式指定的数据,如 我的尝试: const chart = c3.generate({ data: { // x: "title", json: bookData, type: "bar", k
const chart = c3.generate({
data: {
// x: "title",
json: bookData,
type: "bar",
keys: {
value: ["count"]
}
},
axis: {
x: {
tick: {
values: labels,
rotate: 90,
},
type: "category",
}
},
bindto: "#book-title-histogram",
});
取消注释x:“title”
将导致绘图不再可见。注释掉该行后,轴就是空白的
编辑:
bookData
是一个数组,其中每个元素都有键count
和title
,看起来像是映射数据
const bookData = [{
count: 3,
title: 'The Foutainhead'
},{
count: 4,
title: 'Fight Club'
},{
count: 2,
title: 'Ender\'s Game'
}]
const titles = bookData.map((obj) => {
return obj.title
})
const counts = bookData.map((obj) => {
return obj.count
})
console.log(titles)
const chart = c3.generate({
data: {
x: 'title',
y: 'count',
json: {
title: titles,
data: counts,
},
type: "bar",
},
axis: {
x: {
tick: {
count: bookData.length,
rotate: 45,
},
type: "category",
}
},
bindto: "#book-title-histogram",
});