如何在Google Chart中的工具提示中自定义内容 [英] How to customize content inside Tooltip in Google Chart

问题描述

我有以下 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 。

When I hover over the progress bar the first line is always 1 because I have 1 in the first place in above data block.

如果我放了任何东西否则，基线消失了，这是可以理解的。我需要替换工具提示中的 1 并放入其他内容，例如收集的点。

If I put anything else, the baseline disappears, which is understandable. I need to replace the 1 in the tooltip and put something else e.g. Points collected.

如何在可见的基线下实现这一目标？

How would I achieve this with the baseline visible?

基线是指底部的水平。

推荐答案

默认情况下，工具提示将使用数据表的格式化值细胞。

by default, the tooltip will use the formatted value of the data table cell.

使用对象符号，我们可以提供值（ v：）和格式化值（ f：）

using object notation, we can provide both the value (v:) and the formatted value (f:)

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

so, to display something other than 1, use something like the following...

{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 Chart中的工具提示中自定义内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！