在加载 google 个图表时显示工具提示
Show tooltip on load with google charts
我正在尝试使用 tooltip.trigger = 'selection'
和 setSelection([{row:4,column:null}])
,但工具提示不会自动显示。仅当您单击另一个工具提示时。
这里 jsfiddle 显示了问题。
有什么我可以尝试的想法吗?
谢谢!
我最终只使用了注释。如果有人想出办法,我肯定会对工具提示感兴趣。
var gmapData = [[{"label":"Date","type":"date"},"One",{"role":"annotation","type":"string"},"Two",{"role":"annotation","type":"string"},"Three",{"role":"annotation","type":"string"}],["Date(2012, 3, 26)",412,null,278,null,149,null],["Date(2012, 3, 27)",410,null,272,null,147,null],["Date(2012, 3, 30)",414,null,280,null,146,null],["Date(2012, 4, 1)",406,"6",268,"8",141,"1"]];
drawChart();
function drawChart() {
var data = window.data = google.visualization.arrayToDataTable(gmapData);
// apply a tooltip formatting
var formatter = new google.visualization.NumberFormat({pattern: '$#,###'});
var cols = (gmapData[0].length-1) / 2;
x = cols;
// apply a tooltip formatting
while ((--x) >= 0)
formatter.format(data, x*2+1);
var options = {
title: 'Number Watch',
legend: { position: 'bottom' },
interpolateNulls: true,
curveType: 'function',
selectionMode: 'single',
tooltip: {trigger: 'focus'},
focusTarget: 'category',
annotations: {
textStyle: {
fontSize: 18
}
},
vAxis: {format: '$#,###'},
width: 400,
height: 300
};
var chart = window.chart = new google.visualization.LineChart(document.getElementById('num_watch'));
chart.draw(data, options);
}
Hi,
This is a known bug with focusTarget: 'category'. That particular option uses the mouse position as a signal for how to position the tooltip, and so programmatic selection won't trigger a tooltip to display.
To circumvent this issue, you could use multiple selection on the first load. Here's an example of this, along with a reset that changes the focusTarget back to 'category' at the first opportunity: http://jsfiddle.net/b1kt6mrL/
jsfiddle:
// ..... all previous code, not with the annotations
chart.draw(data, options);
chart.setSelection([{row:4, column:1}, {row:4, column:2}, {row:4, column:3}]);
google.visualization.events.addOneTimeListener(chart, 'onmouseover', function() {
var selection = chart.getSelection();
options.focusTarget = 'category';
options.selectionMode = 'single';
google.visualization.events.addOneTimeListener(chart, 'ready', function() {
chart.setSelection(selection);
});
chart.draw(data, options);
});
我正在尝试使用 tooltip.trigger = 'selection'
和 setSelection([{row:4,column:null}])
,但工具提示不会自动显示。仅当您单击另一个工具提示时。
这里 jsfiddle 显示了问题。
有什么我可以尝试的想法吗?
谢谢!
我最终只使用了注释。如果有人想出办法,我肯定会对工具提示感兴趣。
var gmapData = [[{"label":"Date","type":"date"},"One",{"role":"annotation","type":"string"},"Two",{"role":"annotation","type":"string"},"Three",{"role":"annotation","type":"string"}],["Date(2012, 3, 26)",412,null,278,null,149,null],["Date(2012, 3, 27)",410,null,272,null,147,null],["Date(2012, 3, 30)",414,null,280,null,146,null],["Date(2012, 4, 1)",406,"6",268,"8",141,"1"]];
drawChart();
function drawChart() {
var data = window.data = google.visualization.arrayToDataTable(gmapData);
// apply a tooltip formatting
var formatter = new google.visualization.NumberFormat({pattern: '$#,###'});
var cols = (gmapData[0].length-1) / 2;
x = cols;
// apply a tooltip formatting
while ((--x) >= 0)
formatter.format(data, x*2+1);
var options = {
title: 'Number Watch',
legend: { position: 'bottom' },
interpolateNulls: true,
curveType: 'function',
selectionMode: 'single',
tooltip: {trigger: 'focus'},
focusTarget: 'category',
annotations: {
textStyle: {
fontSize: 18
}
},
vAxis: {format: '$#,###'},
width: 400,
height: 300
};
var chart = window.chart = new google.visualization.LineChart(document.getElementById('num_watch'));
chart.draw(data, options);
}
Hi,
This is a known bug with focusTarget: 'category'. That particular option uses the mouse position as a signal for how to position the tooltip, and so programmatic selection won't trigger a tooltip to display.
To circumvent this issue, you could use multiple selection on the first load. Here's an example of this, along with a reset that changes the focusTarget back to 'category' at the first opportunity: http://jsfiddle.net/b1kt6mrL/
jsfiddle:
// ..... all previous code, not with the annotations
chart.draw(data, options);
chart.setSelection([{row:4, column:1}, {row:4, column:2}, {row:4, column:3}]);
google.visualization.events.addOneTimeListener(chart, 'onmouseover', function() {
var selection = chart.getSelection();
options.focusTarget = 'category';
options.selectionMode = 'single';
google.visualization.events.addOneTimeListener(chart, 'ready', function() {
chart.setSelection(selection);
});
chart.draw(data, options);
});