如何解决是否在指针上显示要显示在工具提示中的值?
在“图表”中是否可以在用户将鼠标悬停在的Y位置显示一条水平线并检索该Y值,以便我们可以在工具提示上显示它?
https://meridian.a2z.com/components/tooltip/?platform=react-web
我一直在尝试研究如何在鼠标悬停或单击的图形上获取Y值,但是我在查看我们什至可以将其拉出时遇到困难。
关于可用于获取此数据的属性或组件的任何提示吗?甚至我们可以从图书馆访问的东西吗?
为澄清起见,我们试图获取用户将光标悬停在图形上方的Y轴的值。
因此,如果图形看起来像这样,并且用户将鼠标放在粉红色的圆点位置,我将尝试获取〜7000的值-该图形位置的y值
解决方法
编辑:
有关响应性的说明: 如果您想使它具有响应性,只需根据已应用于图表组件的填充/边距来调整chartBounds,就可以了。
如果您要尝试更高级的操作,并且需要将高度和宽度传递给图表组件以进行更多计算,则以下文章会有所帮助:https://www.pluralsight.com/tech-blog/getting-size-and-position-of-an-element-in-react/
注意:这是一个小技巧,可能不是一个完美的解决方案,但足以使您走上正轨
您应该能够使用onMouseMove中的chartX和chartY字段。不幸的是,这只是光标下的像素值,但是您应该能够将其转换为图形使用的范围。
这是一个使用SimpleLineChart放在一起的示例示例。如果您只想在用户的光标下获取Y值,并且可以扩展为获取X值,则应该可以使用此方法。
const {LineChart,Line,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},];
//The pixel bounds for the LineChart,0 is the top left corner
// these were found using the inspector built into the web browser
// these are in pixels but correspond to the values used in your graph
// so 246 is 0 Y on the graph and 5 is 10000 Y on the graph (according to your data)
const chartBoundsY = {min: 246,max: 5}
// The bounds we are using for the chart
const chartMinMaxY = {min: 0,max: 10000}
// Convert the pixel value from the cursor to the scale used in the chart
const remapRange = value => {
let fromAbs = value - chartBoundsY.min
let fromMaxAbs = chartBoundsY.max - chartBoundsY.min
let normal = fromAbs / fromMaxAbs
let toMaxAbs = chartMinMaxY.max - chartMinMaxY.min
let toAbs = toMaxAbs * normal
return Math.ceil(toAbs + chartMinMaxY.min)
}
const SimpleLineChart = React.createClass({
render () {
return (
<LineChart
width={600} height={300} data={data}
margin={{top: 5,right: 30,left: 20,bottom: 5}}
onMouseMove={props => {
// We get the values passed into the onMouseMove event
if(props.isTooltipActive) {
// If the tooltip is active then we display the Y value
// under the mouse using our custom mapping
console.log(remapRange(props.chartY))
}
}}
>
<XAxis dataKey="name"/>
<YAxis/>
<CartesianGrid strokeDasharray="3 3"/>
<Tooltip/>
<Legend />
<Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{r: 8}}/>
<Line type="monotone" dataKey="uv" stroke="#82ca9d" />
</LineChart>
)
}
})
ReactDOM.render(
<SimpleLineChart />,document.getElementById('container')
)
您可以在jsfiddle中打开此示例,并在JS编辑器中粘贴上面的代码,以亲自尝试。 http://recharts.org/en-US/examples
以下是LineChart的鼠标事件的文档:http://recharts.org/en-US/api/LineChart
,这可以通过轴比例选项和 d3 的 invert 方法来完成。
下面的代码摘录应该会给你一个想法。
const domainY = d3.extent(data,d => d[keyY])
const scaleY = d3.scaleLinear().domain(domainY).range([0,1])
<AreaChart
onMouseDown={(e) => console.log(scaleY.invert(e.chartY))}
...
<YAxis
domain={['auto','auto']}
dataKey={keyY}
type="number"
scale={scaleY}
...
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。