Как узнать, щелкнул ли я фон точечной диаграммы Google Graphs?

Question

У меня есть диаграмма рассеяния Google, в которой я хочу изменить цвет точки, если я нажму на нее, и сбросить точки до их исходного цвета, если я не нажимаю ни на одну точку (например, если я нажимаю на фон ).

Из того, что я вижу в API, щелчок по фону должен вызвать событие выбора, которое возвращает нулевой выбор. Однако мой обработчик выбора вызывается только тогда, когда я нажимаю на точку, а не если я нажимаю на фон графика. (Я могу сказать, посмотрев на вывод консоли - он должен вывести "A", если мой обработчик сработает - а также график.) Щелчок в любом месте, кроме точки, не запускает обработчик вообще.

Как узнать, нажимаю ли я на неточечную часть графика или нет?

function makeGraph(row_data, x_axis_title, y_axis_title) {

    var data = new google.visualization.DataTable();

    data.addColumn('number', x_axis_title);
    data.addColumn('number', y_axis_title); // Required to be a number
    data.addColumn( {'type': 'string', 'role': 'style'} ); // Defines point style

    let pointStyle = 'point { size: 12; shape-type: circle; fill-color: #FFFFFF; color: #CCCCCC }';
    let focusedPointStyle = 'point { size: 14; shape-type: circle; fill-color: #B5D989; color: #CCCCCC }';

    for (let [index, row_data_i] of Object.entries(row_data)) {
        row_data_i[2] = pointStyle;
    }
      
    data.addRows(row_data);

    var options = {
        chart: { title: "myGraph" }
    };

    var chart = new google.visualization.ScatterChart(document.getElementById(div_id_for_graph));


    // SELECT HANDLER

    function selectHandler() {

        console.log("A");

        let selected_graph_item = chart.getSelection()[0];
        
        // Need to reset all points to standard formatting
        for (let i = 0; i < row_data.length; i++)
            data.setCell(i, 3, pointStyle);

        if (selected_graph_item === undefined) { // Didn't click on a point, but on blank graph space
            pass;
        }
        
        else {   
            data.setCell(selected_graph_item["row"], 3, focusedPointStyle);
        }
            
        chart.draw(data, options);  // Redraw so point coloring gets updated
    }

    // Listen for the 'select' event, and call my function selectHandler() when
    // the user selects something on the chart.

    google.visualization.events.addListener(chart, 'select', selectHandler);

    // DRAW CHART

    chart.draw(data, options);
}

Answer 1

событие 'select' запускается только тогда, когда точка выбрана или не выбрана.

Чтобы узнать, был ли нажат фон диаграммы, используйте событие 'click'.

событие click отправит свойства обработчику событий, указав элемент диаграммы, по которому был выполнен щелчок. в этом случае нам нужно игнорировать события щелчка по точкам, поскольку они будут обрабатываться в обработчике выбора.

нам также нужно использовать событие 'ready', чтобы знать, когда диаграмма была перерисована . здесь мы сохраняем и устанавливаем выбор диаграммы, в противном случае точку нельзя отменить.

см. следующий рабочий фрагмент ...

google.charts.load('current', {
  packages: ['corechart']
}).then(makeGraph);

function makeGraph(row_data, x_axis_title, y_axis_title) {
  var data = new google.visualization.DataTable();

  data.addColumn('number', 'x_axis_title');
  data.addColumn('number', 'y_axis_title'); // Required to be a number
  data.addColumn( {'type': 'string', 'role': 'style'} ); // Defines point style

  let pointStyle = 'point { size: 12; shape-type: circle; fill-color: #FFFFFF; color: #CCCCCC }';
  let focusedPointStyle = 'point { size: 14; shape-type: circle; fill-color: #B5D989; color: #CCCCCC }';

  data.addRows([
    [0, 0, pointStyle],
    [1, 1, pointStyle],
    [2, 2, pointStyle]
  ]);

  var options = {
    backgroundColor: '#002855',
    title: "myGraph"
  };

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

  var selection = [];


  // READY HANDLER
  function readyHandler() {
    if (selection.length > 0) {
      chart.setSelection(selection);
    }
  }

  // SELECT HANDLER
  function selectHandler() {
    // reset all points to standard formatting
    for (let i = 0; i < data.getNumberOfRows(); i++) {
      data.setCell(i, 2, pointStyle);
    }

    selection = chart.getSelection();
    if (selection.length > 0) {
      data.setCell(selection[0].row, 2, focusedPointStyle);
    }

    chart.draw(data, options);  // Redraw so point coloring gets updated
  }

  // CLICK HANDLER
  function clickHandler(sender) {
    if (sender.targetID.indexOf('point') === -1) {
      // reset all points to standard formatting
      for (let i = 0; i < data.getNumberOfRows(); i++) {
        data.setCell(i, 2, pointStyle);
      }
      selection = [];
      chart.draw(data, options);  // Redraw so point coloring gets updated
    }
  }

  google.visualization.events.addListener(chart, 'ready', readyHandler);
  google.visualization.events.addListener(chart, 'click', clickHandler);
  google.visualization.events.addListener(chart, 'select', selectHandler);

  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>