带有分组标签（如月、周）的 React Charts 折线图答案

【问题标题】：React Charts line chart with grouped labels like months, weeks带有分组标签（如月、周）的 React Charts 折线图
【发布时间】：2020-05-16 06:01:24
【问题描述】：

是否有可能呈现带有分组点的图表的折线图，假设我每天有 6 个月的数据系列，大约 180 天，这将代表图表中的 180 个点，但 X 轴上的标签会显示每个月的数据，例如 1 月、2 月、3 月、4 月...，类似于 google CRM 股票。

我有一些代码可以格式化标签以获取月份名称，但它显示重复，我想每个月显示一个标签。

    const formatXAxis = (tickItem) => {

        const d = new Date(tickItem);
        return d.toLocaleString('default', { month: 'long' });
    };
    const SimpleLineChart = React.createClass({
        render () {
            return (
        <LineChart width={800} height={400} data={data}
            margin={{top: 5, right: 30, left: 20, bottom: 5}}>
       <XAxis tickFormatter={formatXAxis} dataKey="name"/>
       <YAxis/>
       <CartesianGrid strokeDasharray="3 3"/>
       <Tooltip/>
       <Legend />
       <Line type="monotone" dataKey="uv" stroke="#8884d8" activeDot={{r: 8}}/>
      </LineChart>
    );
  }
})

ReactDOM.render(
  <SimpleLineChart />,
  document.getElementById('container')
);

【问题讨论】：

标签： reactjs recharts

【解决方案1】：

只需要在 xaxis 配置中添加一个间隔。

<XAxis interval={30} tickFormatter={formatXAxis} dataKey="name"/>

【讨论】：