如何判断我是否单击了 Google 图形散点图的背景？

Question

我有一个 google 散点图，如果我点击它我想改变点的颜色，如果我不点击任何点（例如如果我点击背景）。

根据我在 api 上看到的情况，单击背景应该会触发一个 select 事件，该事件 returns 一个空的 selection。但是，我的 select 处理程序只有在我单击某个点时才会被调用，如果我单击图形的背景则不会。（我可以通过查看控制台输出来判断——如果我的处理程序触发，它应该打印“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' 事件仅在某个点被 selected 或未 selected 时触发。

要知道图表背景是否被单击，请使用 'click' 事件。

点击事件会将属性发送到指定被点击的图表元素的事件处理程序。
在这种情况下，我们需要忽略点上的点击事件，因为这些事件将在 select 处理程序中处理。

我们还需要使用 'ready' 事件，以了解何时重新绘制图表。
在这里，我们保存并设置图表selection，否则，一个点不能un-selected.

请参阅以下工作片段...

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>

如何判断我是否单击了 Google 图形散点图的背景？

How Can I Tell If I Clicked the Background of a Google Graphs ScatterChart?

javascript

charts

google-visualization

scatter-plot

onclicklistener