为 PieChart/DonutChart Google Charts VueJS 分配角色/自定义 HTML 工具提示答案

【问题标题】：Assign a role/customize HTML tooltip to PieChart/DonutChart Google Charts VueJS为 PieChart/DonutChart Google Charts VueJS 分配角色/自定义 HTML 工具提示
【发布时间】：2020-01-10 20:51:32
【问题描述】：

我已经为 Google Charts 实现了一个名为 vue-google-charts 的 VueJS 包装器，我正在寻求解决工具提示场景。

我希望通过利用在此选项指令:options="chartDonutOptions" 中设置的toolip: {isHtml: true} 来自定义PieChart 工具提示。

数据如下：

chartDonutData: [
['Stage', 'Percent', 'Tooltip'],
['Data 1, null, ''],
['Data 2, null, ''],
['Data 3, null, ''],
['Data 4, null, ''],
['Data 5, null, '']
]

注意null 之后位置 2 上的空字符串。当我进行 API 调用以更新此对象时，我将值分配给 null 和空的 string 位置。但是，当我将字符串值更新到这些区域时，当我与饼图的每个切片进行交互时，我无法让它们显示出来。

仅显示数组的位置 0 和 1：
数据 1 15.743 (15.7%)

我希望显示每行的位置 0、1 和 2：
数据 1 15.743 (15.7%) 我更新的字符串在这里！

在我的搜索中，很多 cmets 建议为列分配角色。

我很好奇你是如何设置 VueJS/vue-google-charts 的。请指教！

【问题讨论】：

标签： javascript vue.js google-visualization data-visualization pie-chart

【解决方案1】：

尝试将工具提示列标题更改为对象。

['Stage', 'Percent', {type: 'string', role: 'tooltip', p: {html: true}}],

【讨论】：

这部分有效，但在与饼图交互时，只有更新的字符串显示在相应的工具提示中。不过，这个建议是朝着正确的方向发展的。
不确定我是否理解。这其中的哪一部分不起作用？
我需要“数据 1 15.743 (15.7%) 我更新的字符串在这里！”这个要显示，但只能得到这个“我更新的字符串在这里！”显示在工具提示中。
听起来您可能正在尝试将自定义信息附加到默认工具提示中。但这不是它的工作原理。如果您在工具提示列中提供值，则仅显示该值。并删除了默认工具提示。您将需要提供您想要显示的所有内容...
您实际上不会更改标题中的对象，您只需提供整个 html 字符串作为每行的工具提示列的值。 here is an example