Javascript C3使用分类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

如何为通过JSON加载数据的C3条形图指定x轴标签?我在文档中没有看到任何东西,我找到的最接近的是,但它只给出了以列格式指定的数据的示例,而我有以JSON格式指定的数据,如

我的尝试:

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",
        });