Показать нажатие кнопки - PullRequest
Новая
       6

Показать нажатие кнопки

1 голос
/ 24 июня 2019

Я использую Google Visulization Charts (кольцевые диаграммы)

На диаграмме есть подсказки

На щелчке кнопки мы можем динамически показывать подсказки ?? 

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/

1 Ответ

1 голос
/ 24 июня 2019

Во-первых, необходимо использовать последнюю версию Google Chart,
Загрузчик 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' графика
, прежде чем назначить событие нажатия кнопки.
в противном случае произойдет ошибкабыть брошенным.

...