Googleグラフ凡例をクリックして行を隠す方法

Question

次のgoogleグラフを使用する凡例をクリックして行を隠す方法を教えてください。現在、ElecとGasという2つの行があり、対応する凡例をクリックすることに基づいてそれぞれを表示または非表示にしたいと考えています。私は、イベントリスナー関数をグラフに追加する必要があることを理解していますが、この特定のグラフでそれを行う方法はちょっと失われました。私が見つけることができる例は少し異なって行われます。

 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

次のコードをcharに追加することで、これを実現できました。詳細については、この質問と回答を参照してください。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); 
             } 
            } 
           });