React项目中Recharts的DATS时间轴及Tooltip时区修正问题

Got it, let's tackle this time offset issue you're facing. The core problem here is that while you're formatting the X-axis ticks to show the correct time, the underlying DATS value in your data still has the 2-hour lag. That's why the Tooltip is displaying the wrong time—it's using the raw unadjusted timestamp from the API. Here are two solid approaches to fix this completely:

Approach 1: Preprocess Your Data (Most Clean Solution) #

The best way to ensure consistency across both the X-axis and Tooltip is to adjust the timestamp in your data before passing it to Recharts. This way every component uses the corrected time from the get-go.

Modify your Chart component to adjust each entry's DATS value by adding 2 hours (which equals 7200000 milliseconds):

let Chart = (data) => {
  // Correct the 2-hour time offset for all data entries
  const correctedWeatherData = data.dats.map(entry => ({
    ...entry,
    DATS: entry.DATS + 7200000 // Add 2 hours (2 * 60 * 60 * 1000)
  }));

  return (
    <Popup maxWidth="1000" maxHeight="auto" >
      <div className="chart">
        <ComposedChart 
          width={440} 
          height={250} 
          data={correctedWeatherData} {/* Use corrected data here */}
          margin={{ top: 20, right: 0, left: 0, bottom: 20, }}
        >
          {/* Rest of your first chart code remains mostly the same */}
          <XAxis 
            dataKey="DATS" 
            tickFormatter={(unixTime) => moment(unixTime).format('DD.MM - HHч.')} 
          />
          {/* ... other components */}
        </ComposedChart>
      </div>
      <div className="chart">
        <ComposedChart 
          width={500} 
          height={250} 
          data={correctedWeatherData} {/* Use corrected data here too */}
          margin={{ top: 20, right: 0, left: 0, bottom: 20, }}
        >
          {/* Rest of your second chart code */}
          <XAxis 
            dataKey="DATS" 
            tickFormatter={(unixTime) => moment(unixTime).format('DD.MM - HHч.')} 
          />
          {/* ... other components */}
        </ComposedChart>
      </div>
      {data.index + 1} is for popup with lat: {data.lat} and lng {data.lng}
    </Popup>
  )
}

Approach 2: Customize the Tooltip (If You Don't Want to Modify Raw Data) #

If you prefer not to alter the original data, you can create a custom Tooltip component that adjusts the time when displaying it. This keeps your raw data intact but fixes the Tooltip display:

First, define the custom Tooltip:

const CustomWeatherTooltip = ({ active, payload, label }) => {
  if (active && payload && payload.length) {
    // Adjust the label (raw DATS timestamp) by adding 2 hours
    const correctedTime = moment(label).add(2, 'hours').format('DD.MM - HHч.');
    return (
      <div className="custom-tooltip" style={{ backgroundColor: 'white', padding: '8px', borderRadius: '4px', border: '1px solid #ccc' }}>
        <p className="tooltip-time" style={{ margin: 0, fontWeight: 'bold' }}>{correctedTime}</p>
        {payload.map((entry, index) => (
          <p key={index} style={{ margin: '4px 0', color: entry.color }}>
            {entry.name}: {entry.value}{entry.unit || ''}
          </p>
        ))}
      </div>
    );
  }
  return null;
};

Then replace the default <Tooltip /> in both charts with your custom one:

// In each ComposedChart, change:
<Tooltip />
// To:
<Tooltip content={<CustomWeatherTooltip />} />

Why This Works #

• Approach 1 fixes the root cause: your data now has the correct timestamp, so both the X-axis formatter and Tooltip use the right time (you can even simplify the X-axis formatter later if you want, since the timestamp itself is correct now).
• Approach 2 targets the Tooltip specifically, adjusting the time on the fly when rendering the tooltip content, leaving your raw data untouched.

Either method will resolve the mismatch between your X-axis display and Tooltip time. I'd recommend Approach 1 for long-term consistency, especially if you add more components that use this data later.

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