重新图表工具提示显示相同的值

Zoi*_*erg 3 javascript recharts

我遇到一个问题,工具提示为不同系列显示相同的值。因此,每当我将鼠标悬停在弹出窗口上时,我都会收到以下信息: 在此输入图像描述

这是我的实现:

  <LineChart margin={{ top: 15, right: 5, bottom: 5, left: 10 }}>
    <XAxis
      type='number'
      dataKey='timestamp'
      padding={{ left: 30, right: 30 }}
      domain={['dataMin', 'dataMax']}
      height={90}
      tickFormatter={(unixTime) => dayjs(unixTime).format('MM/DD h:mm A')}
      tickMargin={30}
    />

    <YAxis
      dataKey='Demand'
      tickFormatter={(val, _axis) => numeral(val).format('0,0') + ' kW'}
    />

    {chartData && this.renderLines(chartData, theme)}

    <CartesianGrid strokeDasharray='3 3' />
    <Legend />
    <Tooltip
      content={<LiveDailyDemandTooltip
        format={{
        Demand: '0.0'
          }} />}
    />
  </LineChart>
Run Code Online (Sandbox Code Playgroud)

数据如下所示:

{
  "dataID-1": [
    {Demand: 4237, timestamp: 1564977600000}
    ...
  ],
  "dataID-2": [
    {Demand: 112, timestamp: 1564977600000}
    ...
  ]
}

Run Code Online (Sandbox Code Playgroud)

cdu*_*ont 8

正如这里提到的: https: //github.com/recharts/recharts/issues/1625 您应该在 XAxis 中将allowDuplicateCategory 设置为 false:

<XAxis allowDuplicatedCategory={false}/>
Run Code Online (Sandbox Code Playgroud)

这将解决工具提示中重复值的问题。