时间戳

首页 > 解决方案 > 为 PieChart/DonutChart Google Charts VueJS 分配角色/自定义 HTML 工具提示

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

问题描述

我已经为 Google Charts 实现了一个名为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, '']
]

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

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

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

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

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

标签： javascriptvue.jsgoogle-visualizationdata-visualizationpie-chart

解决方案

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

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

推荐阅读