时间戳

首页 > 解决方案 > 显示按钮的点击

charts - 显示按钮的点击

问题描述

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

图表有工具提示

在单击按钮时，我们可以动态显示工具提示吗？

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/

标签： chartsgoogle-visualization

解决方案

首先，需要使用最新版本的谷歌图表，
加载jsapi器已经过时，应该不再使用。

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

这只会改变load声明。
有关更多信息，请参阅以下代码片段并更新库加载器代码。

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

tooltip: {
  trigger: 'both'
}

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

selectionMode: 'multiple',

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

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>

注意：在分配按钮单击事件之前，您还应该等待图表的'ready'事件。 否则会抛出错误。

推荐阅读