23

我正在使用Google 可视化条形图，我想自定义或更改单击条形时出现的工具提示文本和格式。

我已经通过文档，但我没有找到实现这一点的方法。你知道吗：

  1. 甚至可能吗？
  2. 如果是这样，您能否提供一些代码示例？
4

11 回答 11

29

您可以使用google.visualization.NumberFormat类更改数字的格式。

var formatter = new google.visualization.NumberFormat({
    fractionDigits: 0,
    prefix: '$'
});

formatter.format(data, 1); // Apply formatter to second column.

如果您需要更多灵活性，请查看PatternFormat课程。

这是API 参考。

于 2010-11-09T01:05:58.160 回答
4

在工具提示中为您想要的内容创建一个新的数据类型：

var data = new google.visualization.DataTable();
data.addColumn('string', 'Game');
data.addColumn('number', 'Transactions');
data.addColumn({type:'string', role:'tooltip'}); // here is the tooltip line

现在将工具提示中所需的信息添加到数据中：

['$FormatedWeekday', $SalesAll,'$ToolTip']
['$FormatedWeekday', $SalesAll,'$ToolTip']
['$FormatedWeekday', $SalesAll,'$ToolTip']

您将丢失收费提示中的所有默认数据，因此您可能希望重新打包它：

$ToolTip = ''.$FormatedWeekday.' \u000D\u000A '.$SalesAll.' \u000D\u000A '."Red Cross  Event";

"\u000D\u000A" 强制换行

于 2012-03-07T00:54:34.647 回答
3

Looks like you are now able to customize tooltip text by adding a special column that has role: 'tooltip': https://developers.google.com/chart/interactive/docs/customizing_tooltip_content

于 2013-06-21T13:42:55.810 回答
3

Google Chart 不支持格式 html 工具提示 LineChart、BarChart。我用：

google.visualization.events.addListener(chart, 'onmouseover', function(rowColumn){
                                myFunction();
                            });

in myFunction()：您可以popup用来显示更多信息。

于 2012-09-24T10:10:56.857 回答
3

我试图用谷歌饼图做类似的事情。使用原始代码，鼠标悬停时，工具提示显示标签、原始数字和百分比。

原始代码是：

data.setValue(0, 0, '圣诞树');

data.setValue(0, 1, 410000000);

工具提示会显示“圣诞树 410000000 4.4%”。

为了格式化文本，我在代码中添加了一行，所以它是：

data.setValue(0, 0, '圣诞树');

data.setValue(0, 1, 410000000);

data.setFormattedValue(0, 1, "4.1 亿美元");

结果是一个工具提示，上面写着“圣诞树 4.1 亿美元 4.4%”

我希望这有帮助！

于 2010-09-28T19:52:10.853 回答
3

有一种非常简单的方法可以做到这一点，您只需使用其中一个Formatters数据：

// Set chart options
var options = {
hAxis: {format: 'MMM dd, y'}
};

// Format the data
var formatter = new google.visualization.DateFormat({pattern:'EEEE, MMMM d, y'});
formatter.format(data,0);

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.AreaChart(document.getElementById('visualization'));
chart.draw(data, options);

您只需将轴的格式与数据格式不同，因为数据格式只会在鼠标悬停时显示。

于 2012-11-14T16:02:23.190 回答
2

仅供参考，所有：

Google 在 2012 年 9 月添加了自定义 HTML/CSS 工具提示： https ://google-developers.appspot.com/chart/interactive/docs/customizing_tooltip_content

于 2013-01-15T16:17:50.647 回答
2

另一种方法是在数据中添加另一列作为工具提示。

function drawVisualization() {
    data = new google.visualization.DataTable()
    data.addColumn('string', 'Date');
    data.addColumn('number');
    data.addColumn({type:'string',role:'tooltip'});
    data.addRow();
    base = 10;
    data.setValue(0, 0, 'Datapoint1');
    data.setValue(0, 1, base++);
    data.setValue(0, 2, " This is my tooltip1 ");

    data.addRow();
    data.setValue(1, 0, 'Datapoint2');
    data.setValue(1, 1, base++);
    data.setValue(1, 2, "This is my second tooltip2");

    // Draw the chart.
    var chart = new google.visualization.BarChart(document.getElementById('visualization'));
    chart.draw(data, {legend:'none', width:600, height:400});
}
于 2012-03-15T20:53:31.057 回答
0

我发现禁用它的唯一方法是在悬停处理程序中遍历 DOM（无论如何对于饼图）：

$(pie.Ac.firstElementChild.contentDocument.childNodes[0].childNodes[2].childNodes[1].firstChild.childNodes[2]).remove();

哪个是可怕的并且受制于谷歌维护现有的结构......有更好的方法吗？

于 2010-09-15T07:32:59.840 回答
0

我也在寻找同样的选择。好像没有直接的办法。但是我们可以禁用默认工具提示并使用 SelectHandler 弹出我们自己的版本。如果您想出了更好/更直接的方法，请告诉我们。谢谢

于 2010-02-12T19:25:00.867 回答
0

看看 DataTable Roles 和工具提示示例：https ://developers.google.com/chart/interactive/docs/roles

label: 'Year',   'Sales',         null,   'Expenses',         null
`role: domain,     data,       tooltip,         data,      tooltip`
     '2004',       1000,    '1M$ sales,          400,    '$0.4M expenses
                       in 2004'                     in 2004'
     '2005',       1170, '1.17M$ sales,          460,    '$0.46M expenses
                        in 2005'                    in 2005'
     '2006',        660,  '.66M$ sales,         1120,    '$1.12M expenses
                        in 2006'                    in 2006'
     '2007',       1030, '1.03M$ sales,          540,    '$0.54M expenses
                        in 2007'                    in 2007'

空标签分别用作“销售”和“费用”的工具提示。

于 2012-09-24T17:30:44.263 回答