如何在 React-vis 上启用工具提示？

Question

<Sunburst
 hideRootNode
 colorType="literal"
 data={data}
 height={300}
 width={350}/>

我没有看到关于可视化的工具提示，如何才能看到关于悬停图表的工具？

对于 SunBurst，Uber github 页面上有一个示例，您必须根据数据点的角度重新计算工具提示的位置，这不是很方便。

Answer 1

如果需要，您需要手动添加工具提示！ React-vis 尝试不对您将如何使用它做出假设，它只是尝试提供一个灵活的平台。您可以在此处查看如何执行此操作的示例：https://github.com/uber/react-vis/blob/master/showcase/sunbursts/sunburst-with-tooltips.js 但我也可以在此处给出一个简单示例：

<Sunburst hideRootNode colorType="literal" data={data} height={300} width={350}> <Hint value={hoveredValue} /> </Sunburst> 其中 hoveredValues 是一个适当的悬停值（可能是从它自己的旭日上的悬停侦听器获得的）。您可能需要修改悬停方法上从您那里获得的值

function buildValue(hoveredCell) {
  const {radius, angle, angle0} = hoveredCell;
  const truedAngle = (angle + angle0) / 2;
  return {
    x: radius * Math.cos(truedAngle),
    y: radius * Math.sin(truedAngle)
  };
}

我已经打开了一个 PR 将这个答案的内容添加到 sunburst 文档 (#552)，希望能有所帮助。

Answer 2

您需要先从要从中导入它的任何组件导入它，然后将其作为组件添加到 JSX 中。我用了重新图表。

import { ComposedChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';

return (`<ComposedChart
          layout="vertical"
          data={chartData} width={200} height={200}
          margin={{top: 2, right: 2, bottom: 2, left: 2}}>
          <XAxis type="number"/>
          <YAxis dataKey="name" type="category"/>
          <Tooltip/>
          <CartesianGrid stroke='#f5f5f5'/>
          <Bar dataKey='pv' barSize={20} fill='#413ea0'/>
        </ComposedChart> ) `

如何在 React-vis 上启用工具提示？

How to enable tooltip on React-vis?

charts

reactjs

react-vis