如何在 nivo 条形图中的“自定义图层”上添加工具提示？答案

【问题标题】：How to add tooltip on "custom layer" in nivo bar chart?如何在 nivo 条形图中的“自定义图层”上添加工具提示？
【发布时间】：2022-08-21 20:28:19
【问题描述】：

我使用 @nivo/bar 在我的反应应用程序中绘制条形图。添加行以显示平均值。在酒吧，工具提示工作正常。当用户将鼠标悬停在该行上以显示平均值时，我想添加一个工具提示。attached image

标签： reactjs nivo-react

【解决方案1】：

enter code here我不确定是否有人需要实现类似的功能。但我对此做了一些研究，这是我自己问题的答案：

const CustomTagretLine = ({ props }) => {
const { bars } = props
const { showTooltipAt, hideTooltip } = useTooltip()


//show tooltip on mouse enter
const handleMouseEnter = (point) => {
  showTooltipAt(
    props.tooltip(point),
    [point.x + props.margin.left, point.y + props.margin.top],
    'top'
  )
}

//move tooltip with mouse position
const handleMouseMove = (point) => {
  showTooltipAt(
    props.tooltip(point),
    [point.x + props.margin.left, point.y + props.margin.top],
    'top'
  )
}

const handleMouseLeave = () => {
  hideTooltip()
}

return (
  <>
    {bars.map((bar, idx) => (
      <>
        {bar.height && (
          <line
            onMouseOver={() =>
              handleMouseEnter({
                x: bar.x - 5,
                y: props.yScale(bar?.data?.data?.avgVal || 0), //whatever you want
                absX: bar.x - 5 + 70,
                absY: props.yScale(bar?.data?.data?.avgVal || 0) + 50,
                width: 70,
                height: 4,
                data: {
                  ...bar?.data?.data,
                  isAvg: true,
                },
                formattedValue: formatNumber(
                  parseInt(bar?.data?.data?.avgVal) || 0
                ),
              })
            }
            onMouseLeave={() =>
              handleMouseLeave({
                x: bar.x - 5,
                y: props.yScale(bar?.data?.data?.avgVal || 0), //whatever you want
                absX: bar.x - 5 + 70,
                absY: props.yScale(bar?.data?.data?.avgVal || 0) + 50,
                width: 70,
                height: 4,
                data: {
                  ...bar?.data?.data,
                  isAvg: true,
                },
                formattedValue: formatNumber(
                  parseInt(bar?.data?.data?.avgVal) || 0
                ),
              })
            }
            onMouseMove={() =>
              handleMouseMove({
                x: bar.x - 5,
                y: props.yScale(bar?.data?.data?.avgVal || 0), //whatever you want
                absX: bar.x - 5 + 70,
                absY: props.yScale(bar?.data?.data?.avgVal || 0) + 50,
                width: 70,
                height: 4,
                data: {
                  ...bar?.data?.data,
                  isAvg: true,
                },
                formattedValue: formatNumber(
                  parseInt(bar?.data?.data?.avgVal) || 0
                ),
              })
            }
            key={idx}
            opacity="1"
            x1={bar.x - 5}
            x2={bar.x + bar.width + 5}
            y1={props.yScale(bar?.data?.data?.avgVal || 0)}
            y2={props.yScale(bar?.data?.data?.avgVal || 0)}
            stroke="#000000"
            strokeWidth="3"
          ></line>
        )}
      </>
    ))}
  </>
)}

CustomTargetLine 是自定义层，可以在 bar 中这样添加

layers={[
      'grid',
      'axes',
      'bars',
      'legends',
      'annotations',
      (props) => <CustomTagretLine props={props} />,
    ]}

参考：https://nivo.rocks/bar/

【讨论】：