禁用显示在图例上的行，单击“谷歌线图”

Question

每当在Google图表中的图例上单击某个系列时，似乎就会有一条线出现在数据趋势线之上。能阻止这种行为吗？我在文件里什么也找不到。

这方面的一个例子：

​

Answer 1

当单击图例时，将选择整个系列，

，这意味着行值将是null。

chart.getSelection()会返回类似..。

{row: null, column 1}

当单击/选择数据点时，行将有一个数字引用row: 1，等等.

因此，使用'select'事件侦听器，并在行为空时取消所选内容。

chart.setSelection([]);

看下面的工作片段..。

​

google.charts.load('current', {
  callback: function () {
    var container = document.getElementById('chart_div');
    var chart = new google.visualization.LineChart(container);

    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({type: 'string', label: 'Year'});

    // series 0
    dataTable.addColumn({type: 'number', label: 'Category A'});
    dataTable.addColumn({type: 'string', role: 'tooltip', p: {html: true}});

    // series 1
    dataTable.addColumn({type: 'number', label: 'Category B'});
    dataTable.addColumn({type: 'string', role: 'tooltip', p: {html: true}});

    // series 2
    dataTable.addColumn({type: 'number', label: 'Category C'});
    dataTable.addColumn({type: 'string', role: 'tooltip', p: {html: true}});

    dataTable.addRows([
      ['2014', 1000, null, 2000, null, 3000, null],
      ['2015', 2000, null, 4000, null, 6000, null],
      ['2016', 3000, null, 6000, null, 9000, null],
    ]);

    for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
      dataTable.setValue(i, 2, getTooltip(i, 1));
      dataTable.setValue(i, 4, getTooltip(i, 3));
      dataTable.setValue(i, 6, getTooltip(i, 5));
    }

    function getTooltip(rowIndex, columnIndex) {
      return '<div class="ggl-tooltip"><span>' +
        dataTable.getValue(rowIndex, 0) + ': </span>' +
        dataTable.getFormattedValue(rowIndex, columnIndex) + '</div>';
    }

    // use 'select' listener to disable selection on legend click
    google.visualization.events.addListener(chart, 'select', function () {
      var selection = chart.getSelection();
      if (selection.length > 0) {
        if (selection[0].row === null) {
          chart.setSelection([]);
        }
      }
    });

    chart.draw(dataTable, {
      legend: {
        position: 'bottom'
      },
      pointSize: 4,
      tooltip: {
        isHtml: true
      }
    });
  },
  packages: ['corechart']
});

.ggl-tooltip {
  border: 1px solid #E0E0E0;
  font-family: Arial, Helvetica;
  font-size: 10pt;
  padding: 12px 12px 12px 12px;
}

.ggl-tooltip span {
  font-weight: bold;
}

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

​