Google Line Chart 범례 Click 이벤트

Question

사용자가 선형 차트 범례를 클릭 할 때 선형 차트에서 선을 숨기려고합니다. Google Chart API에서 할 수있는 방법이 있습니까? Highcharts에서이 기능을 보았습니다.

Answer 1

예 가능합니다. Here is an example by asgallant :

function drawChart() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'City'); 
    data.addColumn('number', 'Foo'); 
    data.addColumn('number', 'Foo'); 
    data.addColumn('number', 'Bar'); 
    data.addColumn('number', 'Bar'); 
    data.addColumn('number', 'Baz'); 
    data.addColumn('number', 'Baz'); 
    data.addRow(['Boston', 5, null, 7, null, 2, null]); 
    data.addRow(['New York', 4, null, 8, null, 5, null]); 
    data.addRow(['Baltimore', 6, null, 2, null, 4, null]); 

    /* define the series object 
    * follows the standard 'series' option parameters, except it has two additonal parameters: 
    * hidden: true if the column is currently hidden 
    * altColor: changes the color of the legend entry (used to grey out hidden entries) 
    */ 
    var series = { 
     0: { 
      hidden: false, 
      visibleInLegend: false, 
      color: '#FF0000' 
     }, 
     1: { 
      hidden: false, 
      color: '#FF0000', 
      altColor: '#808080' 
     }, 
     2: { 
      hidden: false, 
      visibleInLegend: false, 
      color: '#00FF00' 
     }, 
     3: { 
      hidden: false, 
      color: '#00FF00', 
      altColor: '#808080' 
     }, 
     4: { 
      hidden: false, 
      visibleInLegend: false, 
      color: '#0000FF' 
     }, 
     5: { 
      hidden: false, 
      color: '#0000FF', 
      altColor: '#808080' 
     } 
    }; 
    var options = { 
     series: series, 
     height: 400, 
     width: 600 
    }; 

    var view = new google.visualization.DataView(data); 
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 

    google.visualization.events.addListener(chart, 'select', function() { 
     // if row is undefined, we clicked on the legend 
     if (typeof chart.getSelection()[0]['row'] === 'undefined') { 
      // column is the DataView column, not DataTable column 
      // so translate and subtract 1 to get the series index 
      var col = view.getTableColumnIndex(chart.getSelection()[0]['column']) - 1; 

      // toggle the selected column's data counterpart visibility 
      series[col - 1].hidden = !series[col - 1].hidden; 

      // swap colors 
      var tmpColor = series[col].color; 
      series[col].color = series[col].altColor; 
      series[col].altColor = tmpColor; 

      // reset the view's columns 
      view.setColumns([0,1,2,3,4,5,6]); 

      // build list of hidden columns and series options 
      var hiddenCols = []; 
      options.series = []; 
      for (var i = 0; i < 6; i++) { 
       if (series[i].hidden) { 
        // add 1 to the series index to get DataTable column 
        hiddenCols.push(i + 1); 
       } 
       else { 
        options.series.push(series[i]); 
       } 
      } 

      // hide the columns and draw the chart 
      view.hideColumns(hiddenCols); 
      chart.draw(view, options); 
     } 
    }); 

    chart.draw(view, options); 
} 

Answer 2

여기 해결책이 있습니다. 범례를 클릭하여 선형 차트에서 선을 숨길 수 있습니다.

 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 (typeof sel[0].row === 'undefined') { 
       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); 
      } 
     } 
    }); 

다음은 작동 샘플입니다. jqfaq.com

Answer 3

위에서 언급 한 바와 같이,

view.setColumns (chart.getSelection() [0] .column)를 호출, 당신은 당신의 DataTable에 대한 DataView를을 만든 다음

만 클릭 한 행/열을 표시

는 클릭 한 행/열 호출 view.hideColumns (chart.getSelection() [0] .column)

대해 getSelection() 사용자가 선택한 차트에 선/전설이있을 것이다을 숨 깁니다.