React中PatternFly Bullet Chart组件如何实现悬停单框展示所有tooltip

实现方案 #

PatternFly 提供的 ChartBullet 原生支持自定义 tooltip 能力，你可以通过两种方式实现聚合 tooltip 效果：

方法1：使用组件原生自定义tooltip属性

无需禁用allowTooltip，直接通过tooltipComponent属性自定义tooltip内容，内置的tooltip触发逻辑会自动适配：

1. 移除原来的allowTooltip={false}配置，改为allowTooltip={true}
2. 新增tooltipComponent属性，直接渲染你需要的平均值、最大值两个指标

修改后的代码如下：

import { ChartBullet, ChartTooltip } from '@patternfly/react-charts';

// 组件渲染部分
<ChartBullet
 ariaDesc={pDescr}
 ariaTitle={pDescr}
 bulletSize={135}
 axisComponent={<ChartAxis  tickValues={[-1]} />}
 comparativeWarningMeasureData={[{ name: 'Max', y: this.data }]}
 labels={({ datum }) =>  datum.name ? `${datum.name}: ${datum.y}` : `${datum.y}`}
 maxDomain={{ y: 100 }}
 primarySegmentedMeasureData={[{ name: 'Average', y: this.dataAvg }]}
 width={width}
 height={37}
 title={pDescr}
 titlePosition="left"
 qualitativeRangeData={[{ y: 100 }]}
 allowTooltip={true}
 tooltipComponent={
   <ChartTooltip
     constrainToVisibleArea
     flyoutWidth={160}
     labelComponent={
       <tspan dy={-5} x={10}>
         <tspan x={10} dy="1.2em">Average: {this.dataAvg}</tspan>
         <tspan x={10} dy="1.2em">Max: {this.data}</tspan>
       </tspan>
     }
   />
 }
 tooltipProps={{
   activateData: true
 }}
 responsive={true}
 padding={{top:0, bottom:100, right:0, left: paddingLeft}}
/>

方法2：完全自定义外层tooltip（更高灵活性）

如果原生的触发逻辑还是不符合你的要求，可以在外层套一个容器，手动监听鼠标事件控制自定义tooltip的显示，完全自主控制触发范围和样式：

// 组件内先新增状态控制tooltip显示
state = {
  showTooltip: false,
  tooltipX: 0,
  tooltipY: 0
}

// 渲染部分
<div 
  style={{ position: 'relative', display: 'inline-block' }}
  onMouseMove={(e) => {
    this.setState({
      showTooltip: true,
      tooltipX: e.clientX + 12,
      tooltipY: e.clientY + 12
    })
  }}
  onMouseLeave={() => this.setState({ showTooltip: false })}
>
  <ChartBullet
    ariaDesc={pDescr}
    ariaTitle={pDescr}
    bulletSize={135}
    axisComponent={<ChartAxis  tickValues={[-1]} />}
    comparativeWarningMeasureData={[{ name: 'Max', y: this.data }]}
    labels={({ datum }) =>  datum.name ? `${datum.name}: ${datum.y}` : `${datum.y}`}
    maxDomain={{ y: 100 }}
    primarySegmentedMeasureData={[{ name: 'Average', y: this.dataAvg }]}
    width={width}
    height={37}
    title={pDescr}
    titlePosition="left"
    qualitativeRangeData={[{ y: 100 }]}
    allowTooltip={false}
    responsive={true}
    padding={{top:0, bottom:100, right:0, left: paddingLeft}}
  />
  {/* 自定义tooltip浮层 */}
  {this.state.showTooltip && (
    <div 
      style={{
        position: 'fixed',
        top: this.state.tooltipY,
        left: this.state.tooltipX,
        background: '#1b1d21',
        color: '#ffffff',
        padding: '8px 12px',
        borderRadius: '4px',
        fontSize: '14px',
        zIndex: 9999,
        pointerEvents: 'none',
        lineHeight: '1.5'
      }}
    >
      <div>Average: {this.dataAvg}</div>
      <div>Max: {this.data}</div>
    </div>
  )}
</div>

两种方案都可以实现你要的悬停任意区域展示统一聚合tooltip的效果，第一种方案适配性更强，第二种可以完全自定义样式和交互逻辑。

内容的提问来源于stack exchange，提问作者Arun Kumar