如何使用HTML工具提示与触发器:'both'在谷歌图表中
How can I use HTML tooltip with trigger:'both' in Google Charts
我必须显示HTML工具提示(使用谷歌图表)当用户点击悬停栏时,我已经编写了这个,当用户悬停栏时,它显示工具提示:
<script type="text/javascript">
var colores = ['#1D1E55', '#859DC4', '#6D165E'];
var indiceColorAsignado = 0;
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var propiedadCol = {
type: 'string',
role: 'annotation'
};
var dataTable = google.visualization.arrayToDataTable([
['Id', {'type': 'string', 'role': 'tooltip', 'p': {'html': true}}<?php
$aux = $encabezados;
$conta = 1;
foreach ($aux as $key => $value) {
if ($conta < 3) {
unset($aux[$key]);
$conta++;
};
}
$complementoEncabezado = "";
foreach ($aux as $key => $value) {
$complementoEncabezado .= ",'".$value."',propiedadCol";
}
$complementoEncabezado .= "],";
echo $complementoEncabezado;
?>
<?php
$renglodDeDatos = "";
$nombresToolTip = $encabezados;
unset($nombresToolTip['id']);
foreach ($datosAGraficar as $key => $value) {
$conta = 1;
foreach ($value as $llave => $valor) {
if ($conta != 2) {
if ($llave == "id") {
$valoresToolTip = $value;
unset($valoresToolTip['id']);
$renglodDeDatos .= "['".$valor."',contenidoHTML(".json_encode($nombresToolTip).",".json_encode($valoresToolTip).")";
} else {
$renglodDeDatos .= ",".$valor.",''";
}
}
$conta++;
}
$renglodDeDatos .= "],";
}
echo $renglodDeDatos;
?>
]);
var options = {
title: '<?php echo $titulo_grafica; ?> del PGD',
hAxis: {
title: '<?php echo $titulo_grafica ?>',
titleTextStyle: {
color: 'black',
bold:true,
},
},
vAxis: {
title: 'Porcentaje',
titleTextStyle: {
color: 'black',
bold:true,
},
},
// colors: ['#7F6FD2', '#94F29C', '#F8ECBC'],
// colors: ['#AF9965', '#DAC674', '#F3E79A'],
// colors: ['#EE7009', '#0A7AAC', '#504C4B'],
// colors: ['#0A19BB', '#02073A', '#4D5073'],
colors: colores,
// backgroundColor: {
// stroke: 'red',
// strokeWidth: 10,
// },
focusTarget: 'category',
selectionMode: 'multiple',
tooltip: {
isHtml: true,
},
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(dataTable, options);
google.visualization.events.addListener(chart, 'select', miFuncion);
var columnas = new Array();
function miFuncion() {
var selection = chart.getSelection();
var message = '';
for (var i = 0; i < selection.length; i++) {
var item = selection[i];
if (item.row != null && item.column != null) {
var str = dataTable.getFormattedValue(item.row, item.column);
message += '{row:' + item.row + ',column:' + item.column + '} = ' + str + ''n';
} else if (item.row != null) {
var str = dataTable.getFormattedValue(item.row, 0);
message += '{row:' + item.row + ', column:none}; value (col 0) = ' + str + ''n';
} else if (item.column != null) {
var str = dataTable.getFormattedValue(0, item.column);
var indice = columnas.indexOf(item.column);
if (indice != -1) {
columnas.splice(indice, 1);
for (var j = 0; j < dataTable.getNumberOfRows(); j++) {
dataTable.setValue(j, item.column + 1, '');
};
} else{
columnas.unshift(item.column);
for (var j = 0; j < dataTable.getNumberOfRows(); j++) {
dataTable.setValue(j, item.column + 1, (dataTable.getValue(j, item.column)).toString() + '%');
};
};
console.log('columnas '+columnas);
message += '{row:none, column:' + item.column + '}; value (row 0) = ' + str + ''n';
};
};
if (message == '') {
message = 'nothing';
};
console.log('You selected ' + message);
chart.draw(dataTable, options);
}
function contenidoHTML(nombresToolTip,valoresToolTip) {
var indiceObjeto = 1;
var toolTipHTML = '<div style="width:200px; text-align:justify; padding:5px 5px 5px 5px;">';
for(var elemento in nombresToolTip) {
if (indiceObjeto == 1) {
toolTipHTML += '<b>' + nombresToolTip[elemento] + ':</b> ' + valoresToolTip[elemento] +'<br>';
indiceObjeto++;
} else {
toolTipHTML += '<div style="background-color:'+ colores[indiceColorAsignado] +'; padding-left:5px; color:#FFFFFF;"><b>'+ nombresToolTip[elemento] +':</b> '+ (parseFloat(valoresToolTip[elemento])).toFixed(2) +'%</div>'
indiceColorAsignado++;
};
};
toolTipHTML += '</div>';
console.log('HTML '+toolTipHTML);
// return '<div style="width:200px; text-align:justify; padding:5px 5px 5px 5px;">Nombre <br><hr><div style="background-color:#1D1E55; padding-left:5px; color:#FFFFFF;"><b>Avance real:</b> 1000%</div><div style="background-color:#859DC4; padding-left:5px; color:#FFFFFF;"><b>Grado de cumplimiento:</b> 400%</div><div style="background-color:#6D165E; padding-left:5px; color:#FFFFFF;"><b>Avance promedio:</b> 250%</div></div>';
console.log('indiceColorAsignado '+ indiceColorAsignado);
indiceColorAsignado = 0;
return toolTipHTML;
}
}
</script>
我怎么能得到两个事件(点击和悬停),以显示HTML工具提示?谢谢大家
设置选项:
tooltip: {
isHtml: true,
trigger: 'both'
}
相关文章:
- 谷歌地图固定位置覆盖
- 不显示带有本地json文件数据的谷歌地图脚本
- 谷歌地图不是以HTML显示,而是在JS Fiddle上工作
- 谷歌放置API:按国家或餐馆名称搜索餐馆
- 谷歌地图标记不会显示
- 无法在JS中显示谷歌地图
- 科尔多瓦页面类应用程序中的多个谷歌地图
- 使用谷歌应用程序脚本将服务器端数据表返回到客户端
- 需要帮助谷歌地图方向面板在FancyBox中显示
- 在谷歌地图上获取事件的x,y坐标
- 使用谷歌应用程序脚本从工作表中获取值并将其显示在文本框中
- 谷歌地图API v3不适用于移动浏览器或PhoneGap
- 模拟谷歌地图中的点击
- 谷歌文档表面引擎
- 如何知道哪个标记被谷歌地图点击了
- 谷歌地图JS API+JSON-多个标记没有显示
- 如何在谷歌字体加载时显示加载图像
- 缓存谷歌地图数据
- 谷歌图表-如何更改整个表的css属性
- 如何使用HTML工具提示与触发器:'both'在谷歌图表中