将角色/自定义HTML工具提示分配给PieChart / DonutChart Google Charts VueJS

Question

我已经为Google图表实现了名为vue-google-charts的VueJS包装器，并且正在寻找解决工具提示的方案。

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

数据看起来像这样：

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：数据115.743（15.7％）

我希望显示每行的位置0、1和2：数据115.743（15.7％）我的更新字符串在这里！

在我的搜索中，有很多评论建议为该列分配角色。

我很好奇您如何针对VueJS/vue-google-charts进行设置。请指教！

Answer 1

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

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