Question

我在网上使用谷歌可视化图形API。

我正在尝试在工具提示上显示按钮，并在点击/点击图表区域上的任何内容时隐藏工具提示。

当我写下行

时，不会显示Tootlip动作（工具提示上的按钮）

data.addColumn（{type：'string'，role：'tooltip'，'p'：{'html'：true}}）;

我已经写了以下几行来显示工具提示上的按钮。

chart.setAction({id: 'sample', text: 'Ver detalles', action: function() { selection = chart.getSelection(); var selectedRow = selection[0].row; window.location.href = "yourapp://"+selectedRow;}}); 

tooltip:{trigger: 'selection'}

此外，我试图在图表区域的任何位置点击工具提示。怎么做？

我正在使用以下代码

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script><script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart()
{
var data = new google.visualization.DataTable();
data.addColumn('string', 'Dates');
data.addColumn('number','Glucose');
data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});
data.addColumn('number','Glucose');
data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});
data.addColumn('number','Glucose');
data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});
data.addColumn('number','Glucose');
data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});
data.addColumn('number','Glucose');
data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});

data.addRows(
[
['02:31 p.m.',100.00,createCustomHTMLTooltipContent('21 ene - 02:31 p.m. | 100.00', 'Tttt'),null,'',100.00,createCustomHTMLTooltipContent('21 ene - 02:31 p.m. | 100.00', 'Tttt'),null,'',100.00,createCustomHTMLTooltipContent('21 ene - 02:31 p.m. | 100.00', 'Tttt')],['02:32 p.m.',110.00,createCustomHTMLTooltipContent('21 ene - 02:32 p.m. | 110.00', 'Hshu'),null,'',110.00,createCustomHTMLTooltipContent('21 ene - 02:32 p.m. | 110.00', 'Hshu'),null,'',110.00,createCustomHTMLTooltipContent('21 ene - 02:32 p.m. | 110.00', 'Hshu')],
['02:35 p.m.',1000.00,createCustomHTMLTooltipContent('21 ene - 02:35 p.m. | 1000.00', 'Byzui'),null,'',1000.00,createCustomHTMLTooltipContent('21 ene - 02:35 p.m. | 1000.00', 'Byzui'),null,'',1000.00,createCustomHTMLTooltipContent('21 ene - 02:35 p.m. | 1000.00', 'Byzui')],['05:55 p.m.',null,'',555.00,createCustomHTMLTooltipContent('21 ene - 05:55 p.m. | 555.00', 'New'),null,'',555.00,createCustomHTMLTooltipContent('21 ene - 05:55 p.m. | 555.00', 'New'),555.00,createCustomHTMLTooltipContent('21 ene - 05:55 p.m. | 555.00', 'New')]
]
);          

var chart = new google.visualization.LineChart(document.getElementById('chart_div'));                               

chart.setAction({id: 'sample', text: 'Ver detalles', action: function() { selection = chart.getSelection(); var selectedRow = selection[0].row; window.location.href = "yourapp://"+selectedRow;}}); 

chart.draw(data, 
{
width: 319, 
height: 140,
chartArea:{top:20,left:34,width: '85%',height: '70%'},     
legend: { position: 'bottom', alignment:'start'}, 
interpolateNulls:true,   
backgroundColor:'transparent',  
legend: {position: 'none'},  
hAxis: {textStyle: {color: '#343434',fontName: 'verdana',fontSize:6},showTextEvery:1, baselineColor:'transparent',gridlineColor: 'transparent',count:0,minTextSpacing:20},                                   

vAxis: {title:'Glucosa', textStyle: {color: '#343434',fontName: 'verdana',fontSize:6},baselineColor:'transparent',gridlineColor: 'transparent',count:0},                                                  
fontSize: 6,
lineWidth:3.0, 
tooltip:{textStyle:{color: '#343434', fontName:'verdana',fontSize: 10}, isHtml:'true', trigger: 'selection'},     

series: { 
0:{color: '#d57829', visibleInLegend: true, lineWidth: 0, pointSize: 4}, 
1:{color: '#047d94',lineWidth: 0,visibleInLegend: true,pointSize:4 },
2:{color: '#d57829', visibleInLegend: true, lineWidth: 0, pointSize:6}, 
3:{color: '#047d94',lineWidth: 0,visibleInLegend: true,pointSize:6}, 
4:{color: '#FFFFFF',visibleInLegend: true,pointSize:0}
}                     
}         
);                          
}

function createCustomHTMLTooltipContent(readingInfo, commentText) 
{                   
   return '<div style="padding:5px 5px 25px 5px;">' + readingInfo + '<br>' + commentText + '</div>';                            
}      

</script></head><body style="-webkit-tap-highlight-color: rgba(0,0,0,0);">      
<div id="chart_div"></div>                                          
</head>                          
</html>

Current output of above code.

上面代码的当前输出显示在图像中。

任何帮助将不胜感激。

Google可视化API：Tootlip操作（按钮）未显示

0 个答案: