图表中各个堆叠条形的工具提示?

时间:2020-01-06 14:47:13

标签: javascript reactjs d3.js bar-chart recharts

Recharts中,有什么方法可以显示堆积条形图中条形的单独工具提示?

当前它显示所有堆积条形图的数据,但是如果有很多条形图,这可能会变得很笨拙!该示例中图形外观的屏幕截图为:

enter image description here

您可以看到工具提示包含有关pv和uv栏的数据,但是如果将鼠标悬停在pv上时,我会希望显示该提示,就像将鼠标悬停在uv上一样。

Recharts网站上的examplehere。显示条形图的代码为:

<BarChart width={600} height={300} data={data}
        margin={{top: 20, right: 30, left: 20, bottom: 5}}>
   <CartesianGrid strokeDasharray="3 3"/>
   <XAxis dataKey="name"/>
   <YAxis/>
   <Tooltip/>
   <Legend />
   <Bar dataKey="pv" stackId="a" fill="#8884d8" />
   <Bar dataKey="uv" stackId="a" fill="#82ca9d" />
</BarChart>

对于拥有13000个用户和21000个用户的图书馆,我认为这是一个基本要求。

0 个答案:

没有答案