如何在新条形图“自定义层”上添加工具提示？

Question

我已经使用@nivo/bar来绘制我的react应用程序中的条形图。添加行以显示平均值。在酒吧里，工具提示很好用。当用户悬停在线上以显示平均值时，我想添加一个工具提示。附像

Answer 1

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

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是自定义层，可以像这样在条形图中添加

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

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