React Google Charts Custom Tooltip (AreaChart) 仅显示在一个区域答案

【问题标题】：React Google Charts Custom Tooltip (AreaChart) only showing on one areaReact Google Charts Custom Tooltip (AreaChart) 仅显示在一个区域
【发布时间】：2021-09-30 04:59:55
【问题描述】：

我正在使用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 工具提示针对正区域显示。我希望自定义工具提示也能显示在正区域。这可能吗？

【问题讨论】：

标签： reactjs charts google-visualization react-google-charts area-chart

【解决方案1】：

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

您需要按如下方式添加一列...

['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

【讨论】：