个人中心
gpt4 book ai didi

Recharts: Turn off background hover for bar charts(重新绘制图表：关闭条形图的背景悬停)

转载 作者：bug小助手 更新时间：2023-10-24 17:54:21 32 4
gpt4 key购买 nike



Is there a way to turn off this gray background that appears on hover for bar charts in Recharts?

有没有办法关闭重排图表中条形图悬停时显示的灰色背景？



Screenshot of bar chart with gray background appearing behind bars.



Using version 1.4.1. Code (simplified) looks like this:

使用版本1.4.1。代码(简化)如下所示：



import React from "react"

// Recharts
import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts"

import CustomTooltip from "../CustomTooltip"

const BarChart = ({ chartData, chartInfo }) => (
  <ResponsiveContainer width="99%" height={260}>
    <BarChart data={chartData}>
      <XAxis
        dataKey="label"
        type="category"
        allowDuplicatedCategory={true}
        tickLine={false}
        orientation="bottom"
      />

      <YAxis
        tickLine={false}
        orientation="left"
        axisLine={false}
      />

      <Tooltip
        isAnimationActive={false}
        separator={": "}
        content={<CustomTooltip />}
      />

      <CartesianGrid vertical={false} />

      {chartInfo.map(bar => (
        <Bar
          key={bar.dataKey}
          name={bar.name}
          dataKey={bar.dataKey}
          isAnimationActive={false}
        />
      ))}
    </BarChart>
  </ResponsiveContainer>
)

export default BarChart



I've poured over the API docs as well as looking through the source code. Doesn't seem to be a way to do it, but some of the demos have it disabled, like this one.

我已经翻阅了API文档并查看了源代码。似乎不是一种方法，但一些演示程序禁用了它，就像这个。



I tried setting up mine with custom shapes like that demo and rendering with Cell instead of Bar, but the background was still there on hover. The background color is #ccc but searching the repository with that keyword yielded no clear methods or props to try to override or hook into.

我试着用自定义形状设置我的，比如演示，用Cell而不是Bar渲染，但背景仍然悬停在那里。背景颜色是#ccc，但使用该关键字搜索存储库时，没有找到可以尝试覆盖或挂钩的明确方法或道具。


更多回答
优秀答案推荐

You can use the cursor prop on the <Tooltip /> to achieve what you need:

您可以使用 上的光标道具来实现所需的功能：



<Tooltip cursor={{fill: '#f00'}} />


Here's a working fiddle I made based on some example from their docs.

这是我根据他们的文档中的一些例子制作的实用小提琴。



You can simply use transparent as a value for the fill property.

您可以简单地使用透明作为Fill属性的值。





const {BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend} = Recharts;
const data = [
      {name: 'Page A', uv: 4000, pv: 2400, amt: 2400},
      {name: 'Page B', uv: 3000, pv: 1398, amt: 2210},
      {name: 'Page C', uv: 2000, pv: 9800, amt: 2290},
      {name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
      {name: 'Page E', uv: 1890, pv: 4800, amt: 2181},
      {name: 'Page F', uv: 2390, pv: 3800, amt: 2500},
      {name: 'Page G', uv: 3490, pv: 4300, amt: 2100},
];
const SimpleBarChart = React.createClass({
	render () {
  	return (
    	<BarChart width={600} height={300} data={data}
            margin={{top: 5, right: 30, left: 20, bottom: 5}}>
       <CartesianGrid strokeDasharray="3 3"/>
       <XAxis dataKey="name"/>
       <YAxis/>
       <Tooltip cursor={{fill: 'transparent'}}/>
       <Legend />
       <Bar dataKey="pv" fill="#8884d8" />
       <Bar dataKey="uv" fill="#82ca9d" />
      </BarChart>
    );
  }
})

ReactDOM.render(
  <SimpleBarChart />,
  document.getElementById('container')
);

body {
  margin: 0;
}

#container {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  width: 800px;
  height: 800px;
  background-color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/react-with-addons.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/react-dom.min.js"></script>
<script src="https://npmcdn.com/[email protected]/prop-types.min.js"></script>
<script src="https://npmcdn.com/[email protected]/umd/Recharts.min.js"></script>

<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>





The grey area you mentioned is called cursor. Quoting the Tooltip API docs:

您提到的灰色区域称为光标。引用工具提示API文档：




If set false, no cursor will be drawn when tooltip is active.




So the answer to your question is:

因此，你的问题的答案是：



<Tooltip cursor={false} />


BTW, I'm using [email protected]

顺便说一句，我正在使用[受保护的电子邮件]



Use below cursor attribute to Tooltip.

将下面的光标属性用于工具提示。


<Tooltip cursor={{fill: 'transparent'}}/>

更多回答

Amazing! I thought for sure I had tried that prior, but I guess not because I tried it just now and it worked perfectly. Thank you!

太棒了！我以为我之前肯定试过了，但我猜不是，因为我刚刚试过了，它效果很好。谢谢!

Use following code to turn off the background color <Tooltip cursor={false} />

使用以下代码关闭背景颜色<工具提示光标={False}/>

This should be in the documentation. Thank you so much.

这应该在文档中提供。非常感谢。

32 4 0
文章推荐： Makefile: sha256sum hangs forever with 0% CPU usage(Makefile：Sha256sum永远挂起，CPU使用率为0%)
文章推荐： JUCE Message Thread (1): EXC_BREAKPOINT (code=EXC_I386_BPT, subcode=0x0) when trying to build plugin(JUCE消息线程(1)：尝试构建插件时EXC_BREAKPOINT(CODE=EXC_I386_BPT，SUBCODE=0x0))
文章推荐： why mscorlib.dll contains BCL classes that also contained by other dlls(为什么mscallib.dll包含的BCL类也由其他dll包含)
文章推荐： React test case - get data from server before rendering(反应测试用例-在呈现之前从服务器获取数据)
bug小助手
个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章
滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com