Recharts折线图数值显示异常：高值显示偏低问题求助

嘿，我来帮你搞定这个折线图的异常显示问题！首先可以明确：这不是Recharts组件的问题，是数据顺序和X轴排序逻辑导致的~

问题根源 #

你的date字段是字符串类型（比如"07"、"10"），而Recharts的X轴默认会按照字符串字典序来排序数据。当数据随机分批传入后，X轴会自动把字符串"10"排在"07"前面（因为字符"1"比"0"的ASCII码大），导致折线图的点连接顺序完全错乱——你看到的"最高值位置更低"，其实是这个值对应的date在X轴上的位置被排到了前面，和其他点的连接顺序不对，才造成了视觉错觉。

两种解决方法 #

方法1：提前对数据按日期数值排序

在渲染图表前，先把数据转换成按日期数值从小到大排序的数组，确保X轴的顺序是07→08→09→10→11→12→13的正确时间顺序：

// 在组件中处理数据
const sortedData = [...this.props.data].sort((a, b) => {
  return parseInt(a.date) - parseInt(b.date);
});

然后把排序后的数组传给LineChart：

<LineChart data={sortedData}>
  <XAxis dataKey='date' label={{ value: "Horas", position: "insideBottom", dy: 10} } />
  <YAxis label={{ value: 'Visitantes', angle: -90, position: 'insideLeft' }}/>
  <Tooltip/>
  <Line type="monotone" dataKey="visitors" stroke="#001529" activeDot={{r: 5}}/>
</LineChart>

方法2：让X轴按数值类型排序

如果不想修改原始数据的顺序，可以给X轴设置scale="number"，同时把date转换成数值类型来排序，再通过tickFormatter把刻度显示回字符串格式：

<LineChart data={this.props.data}>
  <XAxis 
    dataKey={(item) => parseInt(item.date)} 
    scale="number"
    tickFormatter={(value) => `${value}`} // 把数值转回字符串显示，比如10→"10"
    label={{ value: "Horas", position: "insideBottom", dy: 10} } 
  />
  <YAxis label={{ value: 'Visitantes', angle: -90, position: 'insideLeft' }}/>
  <Tooltip/>
  <Line type="monotone" dataKey="visitors" stroke="#001529" activeDot={{r: 5}}/>
</LineChart>

验证效果 #

用上面任意一种方法处理后，X轴的日期顺序会恢复正常，折线也会按照07到13的顺序连接，最高值（date:"13"，visitors:40）就会显示在X轴最右侧的对应高度位置啦。

内容的提问来源于stack exchange，提问作者Paliao