禁用Google Line Chart的图例点击上显示的行

Question

每当系列点击Google Line图表中的图例时，似乎数据趋势线上方会出现一条线。有可能阻止这种行为吗？我在文档中找不到任何内容。

这方面的一个例子：

Answer 1

单击图例时，将选择整个系列，
这意味着行值为null

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

的内容

{row: null, column 1}

VS。单击/选择数据点时，该行将具有数字引用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>