Google图表如何通过单击图例隐藏线

Question

Using the following google chart how would I go about hiding a line by clicking the legend? It currently has two lines Elec and Gas I would like to be able to hide or show each one based on clicking the corresponding legend. I understand I have to add an event listener function to the chart but Im kinda lost on how to do that on this particular chart. The example i can find are done slightly differently.

google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Time', 'Electricity', 'Gas'],
        [new Date('2017-05-01'), 12.903, 4.624],
        [new Date('2017-05-02'), 15.82, 34.4],
        [new Date('2017-05-03'), 9.087, 29.542],
        [new Date('2017-05-04'), 11.094, 18.003],
        [new Date('2017-05-05'), 10.709, 16.573],
        [new Date('2017-05-06'), 10.547, 67.86],
        [new Date('2017-05-07'), 22.491, 4.011],
        [new Date('2017-05-08'), 14.245, 14.898],
        [new Date('2017-05-09'), 0, 0],
        [new Date('2017-05-10'), 0, 0],
        [new Date('2017-05-11'), 0, 0],
        [new Date('2017-05-12'), 0, 0],
        [new Date('2017-05-13'), 0, 0],
        [new Date('2017-05-14'), 0, 0],
        [new Date('2017-05-15'), 0, 0],
        [new Date('2017-05-16'), 0, 0],
        [new Date('2017-05-17'), 0, 0],
        [new Date('2017-05-18'), 0, 0],
        [new Date('2017-05-19'), 0, 0],
        [new Date('2017-05-20'), 0, 0],
        [new Date('2017-05-21'), 0, 0],
        [new Date('2017-05-22'), 0, 0],
        [new Date('2017-05-23'), 0, 0],
        [new Date('2017-05-24'), 0, 0],
        [new Date('2017-05-25'), 0, 0],
        [new Date('2017-05-26'), 0, 0],
        [new Date('2017-05-27'), 0, 0],
        [new Date('2017-05-28'), 0, 0],
        [new Date('2017-05-29'), 0, 0],
        [new Date('2017-05-30'), 0, 0],
        [new Date('2017-05-31'), 0, 0],
    ]);


    var dateRange = data.getColumnRange(0);
    var oneDay = (1000 * 60 * 60 * 24);
    var ticksAxisH = [];
    for (var i = dateRange.min.getTime(); i <= dateRange.max.getTime(); i = i + oneDay) {
        // add tick every 3 days
        if ((((i - dateRange.min.getTime()) / oneDay) % 3) === 0) {
            ticksAxisH.push(new Date(i));
        }
    }
    // ensure last day is added
    if (ticksAxisH[ticksAxisH.length - 1].getTime() !== dateRange.max.getTime()) {
        ticksAxisH.push(dateRange.max);
    }

    var options = {
        chartArea: {
            width: "80%"
        },
        width: 900,
        height: 500,
        hAxis: {
            title: 'Daily Total',
            viewWindowMode: 'pretty',

            ticks: ticksAxisH,

            slantedText: false,
            format: 'd MMM yy',
            gridlines: {
                color: 'transparent'
            },
            textStyle: {
                color: 'black',
                fontSize: 12,
                fontName: 'Arial',
                bold: true,
                italic: false,
                textAlign: 'right'
            },
            titleTextStyle: {
                color: 'black',
                fontSize: 16,
                fontName: 'Arial',
                bold: true,
                italic: false
            },
        },
        vAxis: {
            title: 'kWh',
            titleTextStyle: {
                color: 'black',
                fontSize: 16,
                fontName: 'Arial',
                bold: true,
                italic: false
            },
            textStyle: {
                color: 'black',
                fontSize: 12,
                fontName: 'Arial',
                bold: true,
                italic: false
            },
        },

        legend: {
            position: 'top',
            width: "90%"
        },
        backgroundColor: '#fff',
        colors: ['#f36daa', '#51b9d2'],
    };
    var chart = new google.visualization.AreaChart(document.getElementById('graph-tab-2'));
    chart.draw(data, options);
}

Answer 1

I was able to achieve it by adding the following code to the char. See this question and answer for details Show/hide lines/data in Google Chart

var columns = [];
var series = {};
for (var i = 0; i < data.getNumberOfColumns(); i++) {
   columns.push(i);
   if (i > 0) {
      series[i - 1] = {};
   }
}

google.visualization.events.addListener(chart, 'select', function () {
    var sel = chart.getSelection();
    // if selection length is 0, we deselected an element
    if (sel.length > 0) {
       // if row is undefined, we clicked on the legend
       if (sel[0].row === null) {
           var col = sel[0].column;
           if (columns[col] == col) {
              // hide the data series
              columns[col] = {
                 label: data.getColumnLabel(col),
                 type: data.getColumnType(col),
                 calc: function () {
                     return null;
                 }
              };

              // grey out the legend entry
              series[col - 1].color = '#CCCCCC';
          } else {
              // show the data series
              columns[col] = col;
              series[col - 1].color = null;
          }
          var view = new google.visualization.DataView(data);
          view.setColumns(columns);
          chart.draw(view, options);
       }
  }
});