将 role/customize HTML 工具提示分配给 PieChart/DonutChart Google 图表 VueJS

Question

我已经为 Google 图表实现了一个名为 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%) 我更新的字符串在这里！

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

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

Answer 1

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

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

将 role/customize HTML 工具提示分配给 PieChart/DonutChart Google 图表 VueJS

Assign a role/customize HTML tooltip to PieChart/DonutChart Google Charts VueJS

javascript

data-visualization

google-visualization

pie-chart

vue.js