ajax 如何在 Google Vizualization Bar Charts 中自定义工具提示（文本和格式）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2068593/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to customize tooltips(text and Format) in Google Vizualization Bar Charts?
提问by fabien7474
I am using Google Visualization Bar Chartand I would like to customize or change the tooltip text and formatthat appears when clicking on a bar.
我正在使用Google 可视化条形图，我想自定义或更改单击条形时显示的工具提示文本和格式。
I have been through documentation but I didn't find a way to implement this. Do you know:
我已经通过文档，但我没有找到实现这一点的方法。你知道吗：
- Is it even possible?
- If so, could you provide some code examples ?
- 甚至有可能吗？
- 如果是这样，你能提供一些代码示例吗？
回答by Richard Poole
You can change the way the number is formatted by using the google.visualization.NumberFormatclass.
您可以使用google.visualization.NumberFormat类更改数字的格式。
var formatter = new google.visualization.NumberFormat({
fractionDigits: 0,
prefix: '$'
});
formatter.format(data, 1); // Apply formatter to second column.
If you need more flexibility, have a look at the PatternFormatclass.
如果您需要更多灵活性，请查看PatternFormat课程。
Here's the API reference.
这是API 参考。
回答by Craig Van Sant
Create a new data type for what you want in the tool tip:
在工具提示中为您想要的内容创建新的数据类型：
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
Now add the info that you want in your tooltip to you data:
现在将工具提示中所需的信息添加到数据中：
['$FormatedWeekday', $SalesAll,'$ToolTip']
['$FormatedWeekday', $SalesAll,'$ToolTip']
['$FormatedWeekday', $SalesAll,'$ToolTip']
You will loose all the default data in your toll tip so you might want you re-package it:
您将丢失收费提示中的所有默认数据，因此您可能需要重新打包它：
$ToolTip = ''.$FormatedWeekday.' \u000D\u000A '.$SalesAll.' \u000D\u000A '."Red Cross Event";
the "\u000D\u000A" forces a line break
"\u000D\u000A" 强制换行
回答by GaCon
Google Chart not support format html tooltip LineChart, BarChart. I use:
Google Chart 不支持格式 html tooltip LineChart, BarChart。我用：
google.visualization.events.addListener(chart, 'onmouseover', function(rowColumn){
myFunction();
});
in myFunction(): you can use popupto show more information.
in myFunction()：可以popup用来显示更多信息。
回答by Adam
There is a very easy way to do it, you just have to use one of the Formattersfor the data:
有一种非常简单的方法可以做到，您只需要对数据使用其中之一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);
You simply format the axis differently from data format, since the data format will only show up when you mouseOver.
您只需将轴的格式与数据格式不同，因为数据格式只会在您鼠标悬停时显示。
回答by Katy
I was trying to do a similar thing with a Google pie chart. With the original code, on mouseover, the tooltip was showing the label, the raw number, and the percentage.
我试图用谷歌饼图做类似的事情。使用原始代码，在鼠标悬停时，工具提示显示标签、原始数字和百分比。
The orignal code was:
原来的代码是：
data.setValue(0, 0, 'Christmas trees');
data.setValue(0, 1, 410000000);
data.setValue(0, 0, '圣诞树');
数据集值(0, 1, 410000000);
And the tooltip would show "Christmas trees 410000000 4.4%."
工具提示将显示“圣诞树 410000000 4.4%”。
To format the text, I added a line to the code, so it was:
为了格式化文本，我在代码中添加了一行，所以它是：
data.setValue(0, 0, 'Christmas trees');
data.setValue(0, 1, 410000000);
data.setFormattedValue(0, 1, "$410 million");
data.setValue(0, 0, '圣诞树');
数据集值(0, 1, 410000000);
data.setFormattedValue(0, 1, "4.1 亿美元");
The result was a tooltip that read, "Christmas trees $410 million 4.4%"
结果是一个工具提示，上面写着“圣诞树 4.1 亿美元 4.4%”
I hope this helps!
我希望这有帮助！
回答by Raibaz
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
看起来您现在可以通过添加具有以下内容的特殊列来自定义工具提示文本role: 'tooltip'：https: //developers.google.com/chart/interactive/docs/customizing_tooltip_content
回答by Nate
FYI, All:
仅供参考，所有：
Google added custom HTML/CSS tooltips in September 2012: https://google-developers.appspot.com/chart/interactive/docs/customizing_tooltip_content
Google 在 2012 年 9 月添加了自定义 HTML/CSS 工具提示：https: //google-developers.appspot.com/chart/interactive/docs/customizing_tooltip_content
回答by minaz
Another way to do it is by adding another column to your data that will act as the tooltip.
另一种方法是向数据中添加另一列作为工具提示。
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});
}
回答by MVK
I was also looking for the same option. Seems like there isn't any direct way. But we can disable the default tooltip and popup our own version using SelectHandler. Do let us know if you have figured out a more better/direct way. Thanks
我也在寻找同样的选择。好像没有什么直接的方法。但是我们可以禁用默认工具提示并使用 SelectHandler 弹出我们自己的版本。如果您想出了更好/更直接的方法，请告诉我们。谢谢
回答by Steve Pike
The only way I found to disable it was to traverse the DOM in the hover handler (for pie charts anyway):
我发现禁用它的唯一方法是在悬停处理程序中遍历 DOM（无论如何对于饼图）：
$(pie.Ac.firstElementChild.contentDocument.childNodes[0].childNodes[2].childNodes[1].firstChild.childNodes[2]).remove();
$(pie.Ac.firstElementChild.contentDocument.childNodes[0].childNodes[2].childNodes[1].firstChild.childNodes[2]).remove();
Which is hideous and subject to Google maintaining the structure that exists... is there a better way?
哪个是可怕的，并且受 Google 维护现有结构的约束……有更好的方法吗？
