显示按钮的点击 [英] Show Click of a Button

问题描述

我正在使用Google可视化图表（donut图表）

i am using Google Visulization Charts (donut Charts )

图表具有工具提示

只需单击一下按钮，我们就能动态显示工具提示吗？

On CLick of a Button can we show tool tips dynamically ??

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')
  });
});

http://jsfiddle.net/kcjr90sx/1/

推荐答案

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

jsapi 加载程序已过时，因此不再使用。

first, need to use the latest version of google charts,
the jsapi loader is outdated, and should no longer be used.

使用-> < script src ='https：//www.gstatic.com/charts/loader.js'> < / script>

这只会更改 load 语句。

，请参见以下代码段和更新库加载器代码以获取更多信息。

this will only change the load statement.
see following snippet and update library loader code for more info.

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

next, we can use the following option to allow tooltips to be shown when a slice is selected...

tooltip: {
  trigger: 'both'
}

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

and we can use the following option to select multiple slices...

selectionMode: 'multiple',

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

then, when we click the button, we select the slices, which displays the tooltips.

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  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'},
    selectionMode: 'multiple',
    tooltip: {
      trigger: 'both'
    }
  };
  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
  google.visualization.events.addListener(chart, 'ready', function () {
    $("#button").click(function(){
      var selection = [];
      $.each(new Array(data.getNumberOfRows()), function (rowIndex) {
        if (data.getValue(rowIndex, 1) > 0) {
          selection.push({row: rowIndex});
        }
      });
      chart.setSelection(selection);
    });
  });
  chart.draw(data, options);
});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://www.gstatic.com/charts/loader.js'></script>
<div id="button" data-role="button">Show Tool Tips</div>
<div id='chart_div'></div>

注意：您还应该等待图表的就绪 事件，

，然后再分配按钮单击事件。

，否则将引发错误。

note: you should also wait for the chart's 'ready' event,
before assigning the button click event.
otherwise, an error will be thrown.

这篇关于显示按钮的点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！