重新绘制 X 轴自动未显示大多数时间刻度值？

Question

我刚刚将我的项目从使用 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 分钟增量。

任何帮助，将不胜感激！

Answer 1

您可以在 XAxis 中使用 Interval={0}。它将显示所有勾选

Answer 2

在 XAxis 中使用scale="time"。