我正在使用Google 可视化条形图,我想自定义或更改单击条形时出现的工具提示文本和格式。
我已经通过文档,但我没有找到实现这一点的方法。你知道吗:
- 甚至可能吗?
- 如果是这样,您能否提供一些代码示例?
我正在使用Google 可视化条形图,我想自定义或更改单击条形时出现的工具提示文本和格式。
我已经通过文档,但我没有找到实现这一点的方法。你知道吗:
您可以使用google.visualization.NumberFormat
类更改数字的格式。
var formatter = new google.visualization.NumberFormat({
fractionDigits: 0,
prefix: '$'
});
formatter.format(data, 1); // Apply formatter to second column.
如果您需要更多灵活性,请查看PatternFormat
课程。
这是API 参考。
在工具提示中为您想要的内容创建一个新的数据类型:
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" 强制换行
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
Google Chart 不支持格式 html 工具提示 LineChart、BarChart。我用:
google.visualization.events.addListener(chart, 'onmouseover', function(rowColumn){
myFunction();
});
in myFunction()
:您可以popup
用来显示更多信息。
我试图用谷歌饼图做类似的事情。使用原始代码,鼠标悬停时,工具提示显示标签、原始数字和百分比。
原始代码是:
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%”
我希望这有帮助!
有一种非常简单的方法可以做到这一点,您只需使用其中一个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);
您只需将轴的格式与数据格式不同,因为数据格式只会在鼠标悬停时显示。
仅供参考,所有:
Google 在 2012 年 9 月添加了自定义 HTML/CSS 工具提示: https ://google-developers.appspot.com/chart/interactive/docs/customizing_tooltip_content
另一种方法是在数据中添加另一列作为工具提示。
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});
}
我发现禁用它的唯一方法是在悬停处理程序中遍历 DOM(无论如何对于饼图):
$(pie.Ac.firstElementChild.contentDocument.childNodes[0].childNodes[2].childNodes[1].firstChild.childNodes[2]).remove();
哪个是可怕的并且受制于谷歌维护现有的结构......有更好的方法吗?
我也在寻找同样的选择。好像没有直接的办法。但是我们可以禁用默认工具提示并使用 SelectHandler 弹出我们自己的版本。如果您想出了更好/更直接的方法,请告诉我们。谢谢
看看 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'
空标签分别用作“销售”和“费用”的工具提示。