React Google 图表自定义工具提示（AreaChart）仅显示在一个区域

Question

我正在使用 react-google-charts 构建 AreaChart 并将自定义工具提示添加到图表中的两个不同区域。我的数据数组的格式为：

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

我的数据条目是结果格式：

[x, y, null, 'X: ' + x ". Y: " + Y] // if y > 0
[x, null, y, 'X: ' + x ". Y: " + Y] //if y < 0

在选项字典中，我添加了以下内容：

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

目前，自定义工具提示仅针对负 Y 区域显示，默认 Google 工具提示针对正区域显示。我也希望自定义工具提示也显示在正区域中。这可能吗？

Answer 1

您将需要一个额外的工具提示栏。
每个工具提示都与一个系列相关联，
如果你有两个系列'，你需要两个工具提示，
并且工具提示列应该跟在数据 table.

中的系列列之后

您需要添加一列如下...

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

[x, y, 'X: ' + x ". Y: " + Y, null, null] // if y > 0
[x, null, null, y, 'X: ' + x ". Y: " + Y] //if y < 0

React Google 图表自定义工具提示（AreaChart）仅显示在一个区域

React Google Charts Custom Tooltip (AreaChart) only showing on one area

charts

google-visualization

reactjs

area-chart

react-google-charts