React Google Charts AreaChart自定义Tooltip仅单区域生效问题咨询

问题原因 #

Google Charts 中带tooltip角色的列默认仅作用于它前面紧邻的第一个数据列。你当前仅配置了1个tooltip列，跟在PositiveY列之后，因此只有PositiveY列有值（即y<0）时才会触发自定义tooltip；NegativeY列有值时没有匹配的自定义tooltip列，就会加载默认样式的tooltip。

修复方案 #

1. 修改表头列定义 #

新增一个tooltip列，分别跟在两个Y轴数据列之后，和对应数据列绑定：

[
  'X', 
  'NegativeY', 
  { role: "tooltip", type: "string", p: {html: true}}, // 绑定NegativeY列
  'PositiveY', 
  { role: "tooltip", type: "string", p: {html: true}}  // 绑定PositiveY列
]

2. 调整数据生成逻辑 #

对应新增的列，给对应Y列的tooltip位赋值即可，无值的位置留空：

// y>0时，NegativeY有值，给第一个tooltip位赋值
[x, y, 'X: ' + x + ". Y: " + y, null, null] 
// y<0时，PositiveY有值，给第二个tooltip位赋值
[x, null, null, y, 'X: ' + x + ". Y: " + y]

3. 保留原有配置 #

你现有配置的tooltip参数无需修改，保持如下即可：

tooltip: { isHtml: true, trigger: "visible" }

调整后正负Y轴区域都可以正常显示自定义tooltip，需求可实现。

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