如何在 React C3js 中对 X 轴点进行分组？答案

【问题标题】：How to group X-axis points in react C3js?如何在 React C3js 中对 X 轴点进行分组？
【发布时间】：2019-03-05 17:35:59
【问题描述】：

我开始研究 react-c3js 并遇到了一些问题。

下面是我的 X 轴数组：

"axis": {"x": ["4 2018", "4 2018", "5 2018", "5 2018", "6 2018", "6 2018", "6 2018", "6 2018", "6 2018", "6 2018", "6 2018", "6 2018", "6 2018", "7 2018", "7 2018", "7 2018", "7 2018", "7 2018", "7 2018", "7 2018", "7 2018", "7 2018", "7 2018", "7 2018", "7 2018", "7 2018", "8 2018", "8 2018", "8 2018", "8 2018", "8 2018", "8 2018", "8 2018", "8 2018", "8 2018", "8 2018", "8 2018", "8 2018", "8 2018", "8 2018", "9 2018", "9 2018", "9 2018", "9 2018", "9 2018", "9 2018", "9 2018", "9 2018", "9 2018", "9 2018", "9 2018", "9 2018", "9 2018", "9 2018", "10 2018", "10 2018", "10 2018", "10 2018", "10 2018", "10 2018", "10 2018", "10 2018", "10 2018", "10 2018", "10 2018", "10 2018", "10 2018", "10 2018", "11 2018", "11 2018", "11 2018", "11 2018", "11 2018", "11 2018", "11 2018", "11 2018", "11 2018", "11 2018", "11 2018", "11 2018", "11 2018", "12 2018", "12 2018", "12 2018", "12 2018", "12 2018", "12 2018", "12 2018", "12 2018", "12 2018", "12 2018", "1 2019", "1 2019", "1 2019"]
}

如下图所示

即使是在同一月份，也会显示所有项目

但我需要展示它

我正在使用以下代码：

const Chart = ({ data }) =>
  <C3Chart axis= {{
    'x': {
        type: 'category',
        categories: data.axis['x']
    }
  }} data={{ json: data.chart_data, type:'line'}} />

请帮忙。

【问题讨论】：

类似stackoverflow.com/questions/36770220/…，但没有找到解决办法

标签： reactjs d3.js charts c3.js

【解决方案1】：

您需要设置为timeseries，而不是category https://c3js.org/samples/timeseries.html

【讨论】：