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)
正如这里提到的: https: //github.com/recharts/recharts/issues/1625 您应该在 XAxis 中将allowDuplicateCategory 设置为 false:
<XAxis allowDuplicatedCategory={false}/>
Run Code Online (Sandbox Code Playgroud)
这将解决工具提示中重复值的问题。
| 归档时间: |
|
| 查看次数: |
2624 次 |
| 最近记录: |