如何判斷我是否點擊了 Google Graphs ScatterChart 的背景？

Question

我有一個谷歌散點圖，如果我點擊它，我想改變一個點的顏色，如果我不點擊任何點（例如，如果我點擊背景），我想將這些點重置為其原始顏色。

從我在 api 上看到的內容來看，單擊背景應該會觸發 select 事件，該事件會返回 null 選擇。 但是，我的 select 處理程序只有在我單擊一個點時才會被調用，而不是在我單擊圖形的背景時被調用。 （我可以通過查看控制台 output 來判斷——如果我的處理程序觸發，它應該打印“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 事件會將屬性發送到指定被點擊的圖表元素的事件處理程序。
在這種情況下，我們需要忽略點上的點擊事件，因為這些將在 select 處理程序中處理。

我們還需要使用'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>