recharts 缺少刻度或刻度显示错误答案

【问题标题】：recharts missing ticks or ticks are displayed wrongrecharts 缺少刻度或刻度显示错误
【发布时间】：2021-09-17 10:23:08
【问题描述】：

我正在使用 recharts 库来创建图表。图表的 x 轴是时间轴，我使用时间戳作为它的值。我要做的是仅显示 5 个刻度（例如）等距。我发现很多人在库 git 存储库上遇到了类似的问题。一种修复方法是使用scale="time" 并为 x 轴设置最小刻度间隙：

<XAxis dataKey='timestamp'
   domain={['dataMin', 'dataMax']}
   type = 'number'
   scale="time"
   minTickGap={120}
   tickCount={7} */
   tickFormatter = {(unixTime) => moment(unixTime).format('DD MMM')}
/>

我正在使用库的画笔组件来放大图表，这个实现的问题是，当我放大时，有时它会显示所有的刻度。

例如。不放大：

例如放大：

我发现，如果我删除scale="time" 参数并设置特定的tickCount 并将interval 设置为0，则在我放大时出现的问题会消失，但缺少1 个tick 或仅在我放大时出现。

<XAxis dataKey='timestamp'
   domain={['dataMin', 'dataMax']}
   type = 'number'
   interval={0}
   tickCount={7}
   tickFormatter = {(unixTime) => moment(unixTime).format('DD MMM')}
/>

现在有没有人可以解决上述问题？我认为我不能使用基于轴的最大值和最小值的预定义刻度，因为当我放大时这些值变得无关紧要。

【问题讨论】：

标签： reactjs recharts

【解决方案1】：

据我所知，没有办法治愈它。您可以在诸如ticks={[10,20,50,200,500,1000]} 之类的刻度参数中明确提及您的所有刻度，它们会做得很好

我的另一个解决方法是将域设置为

   domain= {['auto','auto']}

它正确显示了所有的刻度。

【讨论】：