如何在 Google 图表中自定义工具提示内的内容

Question

上面的图表我有以下 data 模型。

var data = google.visualization.arrayToDataTable([
        ["", "Goal Achieved", {role: 'style'}, target_goal_annotation, {role: 'style'}, {role: 'annotation'}],
        [1, achieved_goal, "opacity: .75;", target_goal, "opacity: 0;", "" ]
    ]);

当我将鼠标悬停在进度条上时，第一行始终是 1，因为我在上面的数据块中的第一个位置是 1。

如果我放别的，基线就消失了，这是可以理解的。我需要替换工具提示中的 1 并放置其他内容，例如收集的点数。

如何在基线可见的情况下实现这一点？

我所说的基线是指底部的水平线。

Answer 1

默认情况下，工具提示将使用数据 table 单元格的格式化值。

使用对象表示法，我们可以同时提供值 (v:) 和格式化值 (f:)

因此，要显示 1 以外的内容，请使用类似以下的内容...

{v: 1, f: 'Points collected'}

例如

var data = google.visualization.arrayToDataTable([
    ["", "Goal Achieved", {role: 'style'}, target_goal_annotation, {role: 'style'}, {role: 'annotation'}],
    [{v: 1, f: 'Points collected'}, achieved_goal, "opacity: .75;", target_goal, "opacity: 0;", "" ]
]);

如何在 Google 图表中自定义工具提示内的内容

How to customize content inside Tooltip in Google Chart

charts

google-visualization