Rechart Scatter 工具提示显示额外道具
Rechart Scatter tooltip to show additional prop
我使用的是 Rechart 的散点图
数据显示正常,但我想要工具提示显示额外的弹出窗口(项目名称),就像在条形图上一样。我发现我可以完全自定义工具提示,但我想知道是否有更简单的方法?就像一个我不知道如何使用的道具。 the doc 对如何使用一些道具不是很明确
这是代码。你可以看到我尝试了datakey和label,但是没有成功
<ScatterChart
width={400}
height={400}
margin={{
top: 20, right: 20, bottom: 20, left: 20,
}}
>
<CartesianGrid />
<XAxis type="number" dataKey="sizeMB" name="Size" unit=" MB" />
<YAxis type="number" dataKey="directReferenceCount" name="# of References" unit=" References" />
<Tooltip cursor={{ strokeDasharray: '3 3' }} dataKey={'fullName'} label={'fullName'} />
<Scatter name="Line Item" data={this.props.data} fill="#8884d8">
</Scatter>
</ScatterChart>
除了使用完整的自定义工具提示外,我没有找到其他解决方案。这是代码:
const CustomTooltip = ({ active, payload, label }) => {
if (active) {
return (
<div className="custom-tooltip">
<p className="intro">{payload[0].payload.fullName}</p>
<p className="desc">size: {payload[0].payload.sizeMB}</p>
</div>
);
}
return null;
};
我在找到与原始工具提示相同的 css 时遇到了一些麻烦,但它是:
.custom-tooltip{
margin: 0;
line-height: 24px;
border: 1px solid #f5f5f5;
background-color: rgba(255, 255, 255, 0.8);
padding: 10px;
}
.intro {
border-top: 1px solid #f5f5f5;
margin: 0;
}
.desc {
margin: 0;
color: rgb(3, 62, 146)
}
我会稍微修改自定义工具提示以包括对负载的检查
const CustomTooltip = ({ active, payload, label }) => {
if (active && payload) {
return (
<div className="custom-tooltip">
<p className="intro">{payload[0].payload.fullName}</p>
<p className="desc">size: {payload[0].payload.sizeMB}</p>
</div>
);
}
return null;
};
我使用的是 Rechart 的散点图
数据显示正常,但我想要工具提示显示额外的弹出窗口(项目名称),就像在条形图上一样。我发现我可以完全自定义工具提示,但我想知道是否有更简单的方法?就像一个我不知道如何使用的道具。 the doc 对如何使用一些道具不是很明确
这是代码。你可以看到我尝试了datakey和label,但是没有成功
<ScatterChart
width={400}
height={400}
margin={{
top: 20, right: 20, bottom: 20, left: 20,
}}
>
<CartesianGrid />
<XAxis type="number" dataKey="sizeMB" name="Size" unit=" MB" />
<YAxis type="number" dataKey="directReferenceCount" name="# of References" unit=" References" />
<Tooltip cursor={{ strokeDasharray: '3 3' }} dataKey={'fullName'} label={'fullName'} />
<Scatter name="Line Item" data={this.props.data} fill="#8884d8">
</Scatter>
</ScatterChart>
除了使用完整的自定义工具提示外,我没有找到其他解决方案。这是代码:
const CustomTooltip = ({ active, payload, label }) => {
if (active) {
return (
<div className="custom-tooltip">
<p className="intro">{payload[0].payload.fullName}</p>
<p className="desc">size: {payload[0].payload.sizeMB}</p>
</div>
);
}
return null;
};
我在找到与原始工具提示相同的 css 时遇到了一些麻烦,但它是:
.custom-tooltip{
margin: 0;
line-height: 24px;
border: 1px solid #f5f5f5;
background-color: rgba(255, 255, 255, 0.8);
padding: 10px;
}
.intro {
border-top: 1px solid #f5f5f5;
margin: 0;
}
.desc {
margin: 0;
color: rgb(3, 62, 146)
}
我会稍微修改自定义工具提示以包括对负载的检查
const CustomTooltip = ({ active, payload, label }) => {
if (active && payload) {
return (
<div className="custom-tooltip">
<p className="intro">{payload[0].payload.fullName}</p>
<p className="desc">size: {payload[0].payload.sizeMB}</p>
</div>
);
}
return null;
};