C3 создание гистограммы с категориальными данными JSON

Question

C3 создание гистограммы с категориальными данными JSON

1

Как вы указываете метки оси x для гистограммы C3 с данными, загружаемыми через JSON? Я ничего не вижу в документах, и ближайший я нашел это, но он дает только пример для данных, указанных в формате столбца, тогда как у меня есть данные, указанные в формате 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" это приводит к тому, что сюжет больше не будет виден. Когда эта строка закомментирована, ось просто пустая.

EDIT: bookData - это массив с каждым элементом, имеющим count ключей и title

BlackSheep 11 июнь 2018, в 23:53

Источник

Теги:

javascript

charts

c3.js

1 ответ

Ещё вопросы

Flavio · Accepted Answer · 2018-06-11T20-03-00.000Z

Похоже, что ваши данные работают.

const bookData = [{
  count: 3,
  title: 'The Foutainhead'
},{
  count: 4,
  title: 'Fight Club'
},{
  count: 2,
  title: 'Ender\ 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",
        });