Recharts X 轴自动没有显示大多数时间刻度值？答案

【问题标题】：Recharts X-Axis auto not showing most values in ticks for times?Recharts X 轴自动没有显示大多数时间刻度值？
【发布时间】：2020-02-25 19:17:04
【问题描述】：

我刚刚将我的项目从使用 react vis 转换为 recharts。我目前正在研究为什么蜱没有按预期显示。应该显示 96 个数据点，并且笛卡尔网格会显示它们，但除了在奇怪的时间与我提供的数据点不对齐的少数标签之外，没有出现刻度标签。（刻度线的间隔应为 30 分钟。）

有没有办法让刻度显示在我在数据中指定的位置？

这就是我目前拥有的（我认为“间隔”应该让所有的刻度都出现）。我将时间指定为毫秒，然后对其进行格式化，这似乎在大多数情况下都有效。

<LineChart data={datapoints}>
    <XAxis dataKey="x"
           domain = {['auto', 'auto']}
           name = 'Time'
           tickFormatter = {(unixTime) => moment(unixTime).format('HH:mm')}
           interval={0}
           type = 'number'/>
    <YAxis />
    <CartesianGrid/>
    <Tooltip/>
    <Legend/>
    {this.props.yLines.map(lineKey => {
        return <Line dot={false} type="monotone" dataKey={lineKey} isAnimationActive={false}/>
    })}
</LineChart>

这就是显示的内容：

与我的预期相比（所有间隔显示）

更新：我已经添加了tickCount={96}（就像我使用 react-vis 一样）但时间仍然在奇怪的增量。比如 6:33、8:20 等，而不是 30 分钟的增量。

任何帮助将不胜感激！

【问题讨论】：

有没有办法指定刻度线文本不应该重叠？

标签： recharts

【解决方案1】：

在 XAxis 中使用 scale="time"。

【讨论】：

【解决方案2】：

您可以在 XAxis 中使用 interval={0}。它会显示所有的勾

【讨论】：