Charts 显示按钮的单击_Charts_Google Visualization

Charts 显示按钮的单击

charts google-visualization

Charts 显示按钮的单击,charts,google-visualization,Charts,Google Visualization,我正在使用谷歌可视化图表（甜甜圈图表）图表中有一些工具提示点击一个按钮，我们可以动态显示工具提示吗 google.load("visualization", "1", { packages: ["corechart"] }); google.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColu

我正在使用谷歌可视化图表（甜甜圈图表）

图表中有一些工具提示

点击一个按钮，我们可以动态显示工具提示吗

google.load("visualization", "1", {
    packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Task');
    data.addColumn('number', 'Hours per Day');
    data.addRows([
        ['A', roundNumber(11 * Math.random(), 2)],
        ['B', roundNumber(2 * Math.random(), 2)],
        ['C', roundNumber(2 * Math.random(), 2)],
        ['D', roundNumber(2 * Math.random(), 2)],
        ['E', roundNumber(7 * Math.random(), 2)]
        ]);
    var options = {
        width: 450,
        height: 300,
        colors: ['#ECD078','#ccc','#C02942','#542437','#53777A'],
        legend: {position:'none'},
        pieHole: 0.4,
        animation: {duration:800,easing:'in'}
    };
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

function roundNumber(num, dec) {
    var result = Math.round(num * Math.pow(10, dec)) / Math.pow(10, dec);
    return result;
}

$(document).ready(function(){
  $("#button").click(function(){
   alert('show tool tips')
  });
});

首先，需要使用最新版本的谷歌图表，

jsapi

加载程序已过时，不应再使用

改用-->

这只会更改

load

语句。
有关更多信息，请参阅以下代码段和

接下来，我们可以使用以下选项允许在选择切片时显示工具提示

tooltip: {
  trigger: 'both'
}

我们可以使用以下选项选择多个切片

selectionMode: 'multiple',

然后，当我们单击按钮时，我们选择切片，这将显示工具提示

google.charts.load（'current'{
软件包：['corechart']
}).然后（函数（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Task'）；
data.addColumn（'数字'，'每天小时'）；
data.addRows([
[A'，舍入数（11*Math.random（），2）]，
[B'，舍入数（2*Math.random（），2）]，
[C'，舍入数（2*Math.random（），2）]，
[D'，舍入数（2*Math.random（），2）]，
[E'，整数（7*Math.random（），2）]
]);
变量选项={
宽度：450，
身高：300，
颜色：[“ECD078”、“ccc”、“C02942”、“542437”、“53777A”]，
图例：{位置：'none'}，
pieHole:0.4，
动画：{duration:800，easing:'in'}，
selectionMode:'多个'，
工具提示：{
触发器：“两个”
}
};
var chart=new google.visualization.PieChart（document.getElementById（'chart_div'）；
google.visualization.events.addListener（图表'ready'，函数（）{
$（“#按钮”）。单击（函数（）{
var选择=[]；
$.each（新数组（data.getNumberOfRows（））、函数（rowIndex）{
if（data.getValue（rowIndex，1）>0）{
push（{row:rowIndex}）；
}
});
图.选举（选择）；
});
});
图表绘制（数据、选项）；
});
函数轮号（num，dec）{
var result=Math.round（num*Math.pow（10，12月））/Math.pow（10，12月）；
返回结果；
}


显示工具提示