gpt4 book ai didi

html - 如何控制工具提示在谷歌图表上的行为

转载 作者:太空宇宙 更新时间:2023-11-03 23:21:32 24 4
gpt4 key购买 nike

当我点击谷歌图表点时,在工具提示中显示“查看样本书”。我想使用代码控制工具提示上的启用和禁用属性。截至目前,启用和禁用正在使用鼠标悬停事件,但我想删除它并使用编程简单地启用和禁用“查看示例 block ”。

首先应该禁用它的正常工作 enter image description here

第二个点应该是 enable 但当鼠标悬停在它上面时它显示为 enable 。我需要这应该在我单击图中的点后立即发生。 enter image description here

我的 HTML 代码在这里:

<html>
<head>
<script type="text/javascript"
src="https://www.google.com/jsapi?autoload={
'modules':[{
'name':'visualization',
'version':'1',
'packages':['corechart']
}]
}"></script>

<script type="text/javascript">
google.setOnLoadCallback(drawChart);

function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);

var options = {
title: 'Company Performance',
legend: { position: 'bottom' },
tooltip: { trigger: 'selection' }
};

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

chart.setAction({
id: 'sample',
text: 'See sample book',
enabled:function()
{

if (typeof(chart.getSelection) == 'undefined')
return false;
if (typeof (chart.getSelection()[0]) == 'undefined')
return false;
selection = chart.getSelection();
var ans = selection[0].row;

if(ans == 0)
{
return false;
}
else
{
return true;
}
},
action: function() {
selection = chart.getSelection();
alert(selection[0].row);

}
});

chart.draw(data, options);
}
</script>
</head>
<body>
<div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>
</html>

最佳答案

您可以将工具提示设置为 HTML,这样您可以更好地控制它的操作方式和显示内容。为此,在构建包含列和行的图表时,向图表添加工具提示列

data.addColumn({ type: 'string', role: 'annotation', 'p': { 'html': true } });

如您所见,我们将工具提示信息设置为 html 而不是 SVG,并且您要填充到工具提示中的数据应作为行添加到图表中,与列相对应。

要修改工具提示行为,您可以使用传递给图表的选项,并将 isHtml 添加为 true

工具提示:{ trigger: selection, isHtml: true }

要对您的工具提示进行其他更改,在 css 中,您可以将此行添加到您的 CSS 并开始覆盖默认 css

div.google-visualization-tooltip {
}

关于html - 如何控制工具提示在谷歌图表上的行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28496079/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com