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

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

我没有看到关于Vizualization的工具提示,如何查看悬停图表的工具?

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

#1楼 票数: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,将此答案的内容添加到森伯斯特文档(#552)中,希望对您有所帮助。

#2楼 票数:-4

您需要先从要导入的组件中导入,然后再将其作为组件添加到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> ) `

  ask by awzx translate from so

未解决问题?本站智能推荐:

1回复

如何从 react-vis 中的 onValueMouseOver 获取事件?

根据该反应-VIS DOC , onValueMouseOver应该返回这两个event和datapoint 。 但是,该事件似乎没有通过。 我做错了什么吗?
1回复

react-vis 不会第二次绘制( react-vis 只绘制一次或 react-vis 只绘制第一次)

我有一个带有 react-vis 的组件。 此组件位于图表选项卡上的 react-tabs 中。 当我第一次访问该选项卡时,它被绘制好了。 之后的每次都根本不绘制。 问题是什么?
1回复

使用 react-vis 库在标签下无法正确渲染条形图系列

我遇到了问题。 酒吧系列并不是在它的标签下。 我无法弄清楚出了什么问题。 这是它的代码 数据是这样的
1回复

React-Vis - 如何渲染空图表区域?

我正在开发一个react-vis图表,它将动态更新用户点击/关闭该系列的图例项目时显示的数据。 如果用户单击所有系列的单击,我呈现的JSX基本上如下所示: 我希望这仍然会渲染轴,网格线等,但整个图表将从DOM中删除。 如何使用空数据渲染图表但保留DOM中的轴,网格线等?
1回复

react-vis 使 y 轴按升序排序

再会。 我的数据看起来像这样 还有我的 react-vis 组件代码 看起来很好,但 y 轴显示非常奇怪的顺序。 我该如何解决? 是否可以删除奇怪的“有序”参数? 没有所有轴的序数,它看起来像这样......这对我来说是非常奇怪的行为,我期望更可预测的绘图。 为什么它不在 x 上绘制一
1回复

水平图例 React-vis

我在 React-vis 中遇到水平图例问题。 我使用了这个道具orientation="horizo​​ntal",但什么都没有......
2回复

如何在react-vis条形图中的每个条形上方给出值?

我想在 react-vis 的 VerticalBarSeries 中的每个 rect(bar) 元素上方显示字符串或数值。 并且值应该刚好高于条形高度。 另外,如何更改 barSeries 的条形高度、宽度和边距。 我已经使用 display: flex 使乘法条形图出现在每个条形图旁边还有其他方
1回复

来自 react-vis 的树状图未按预期显示

我正在尝试使用renderMode: 'DOM' ,对于mode: 'circlePack' ,它应该显示以下图像,它仅在我将 renderMode 设置为 'SVG' 时才有效: 当我将 renderMode 设置为“DOM”时,我得到以下信息, onLeafClick 、 onLea