1. 首頁
  2. 問答
  3. Google Charts - 點擊圖例中的隱藏線條

Google Charts - 點擊圖例中的隱藏線條

2012-04-26 42 views

回答

2

要隱藏你的GWT可視化線型圖秀行，請按照下列步驟操作： -

1，創建一個基於現有的DataTable對象的DataView對象：

DataTable dataTable = DataTable.create(); 
DataView dataView = DataView.create(dataTable);

2.Hide的列

dataView.hideColumns(new int[]{<id_of_the_column>});

3.Draw整個圖表仍然基於數據視圖：要在數據視圖隱藏曲線/線

chart.draw(dataView, getOptions());

請注意，這裏有一個警告，第3步是一個昂貴的步驟，對我們來說，它需要將近20-30秒。用於繪製新圖。但是如果數據不是很大，它應該可以在你的上下文中管理。

注意：您必須使用複選框製作自己的圖例，並在用戶選中/取消選中複選框時執行上述操作。

來源

2012-04-29 17:04:46 Anuroop

2

如果您不需要包含縮放和動畫，那麼一個選項就是使用lineWidth和areaOpacity值隱藏數據;

<head> 
    <script type='text/javascript' src='https://www.google.com/jsapi'></script> 

    <script> 
     function updateTable() { 

      // quick data - cleaned up for this example real data sources 
      data = new Array(); 
      data[0] = new Array(); 
      data[0][0] = "Day"; 
      data[0][1] = "Metric 1"; 
      data[0][2] = "Metric 2"; 
      data[0][3] = "Metric 3"; 
      data[1] = new Array(); 
      data[1][0] = 1; 
      data[1][1] = 200; 
      data[1][2] = 50; 
      data[1][3] = 400; 
      data[2] = new Array(); 
      data[2][0] = 2; 
      data[2][1] = 440; 
      data[2][2] = 140; 
      data[2][3] = 40; 
      data[3] = new Array(); 
      data[3][0] = 3; 
      data[3][1] = 300; 
      data[3][2] = 500; 
      data[3][3] = 600; 

      var gdata = google.visualization.arrayToDataTable(data); 

      var options = { 
       // title: 'kala', 
       hAxis: {title: 'Days', titleTextStyle: {color: '#333'}} 
       ,vAxis: {minValue: 0} 
       ,height: 300 
       ,width: 600 
       ,chartArea: {left: 60} 
       ,lineWidth: 2 
       ,series: {0:{color: 'black', areaOpacity: 0.3, lineWidth: 2} 
       ,1:{color: 'red', areaOpacity: 0.3, lineWidth: 2} 
       ,2:{color: 'purple', areaOpacity: 0.3, lineWidth: 2}} 
      }; 

      var chart = new google.visualization.AreaChart(document.getElementById('my_chart')); 
      chart.draw(gdata, options); 

      google.visualization.events.addListener(chart, 
       'select', 
       (function (x) { return function() { AreaSelectHander(chart, gdata, options)}})(1)); 

    } 

    function AreaSelectHander(chart, gdata, options) { 
     // when ever clicked we enter here 
     // more code needed to inspect what actually was clicked, now assuming people 
     // play nicely and click only lables... 
     var selection = chart.getSelection();  
     var view = new google.visualization.DataView(gdata); 
     console.log(options); 

     // click and data index are one off 
     i = selection[0].column - 1; 

     // just simple reverse 
     if (options.series[i].lineWidth == 0) { 
      options.series[i].lineWidth = 2; 
      options.series[i].areaOpacity = 0.3; 
     } 
     else { 
      options.series[i].lineWidth = 0; 
      options.series[i].areaOpacity = 0.0;    
     } 

     chart.draw(gdata, options); 
    } 
    </script> 

    <script type='text/javascript'> 
     google.load('visualization', '1', {packages:['table', 'corechart']}); 
     google.setOnLoadCallback(updateTable); 
    </script> 

</head> 

<body> 
    <div id='my_chart'></div> 
</body>

來源

2013-12-08 21:20:02 JariOtranen

0

以下代碼顯示護目鏡線圖，並通過點擊圖例標籤上具有功能性隱藏/顯示圖線。 #graph_sales_data是div的id，其中顯示圖表和sales_data_graph是變量包含記錄。

function drawChart() { 
         if (sales_data_graph.length > 1) 
         { 
          $('#graph_sales_data').show(); 
          var data = new google.visualization.arrayToDataTable(sales_data_graph); 

          // Instantiate and draw our chart, passing in some options. 
          var chart = new google.visualization.ChartWrapper({ 
           chartType: 'LineChart', 
           containerId: 'graph_sales_data', 
           dataTable: data, 
           colors: ['#ea6f09', '#fb250d', '#0ac9c6', '#2680be', '#575bee', '#6bd962', '#ff0000', '#000000'], 
           options: { 
            width: 1200, 
            height: 500, 
            fontSize: 10, 
            pointSize: 10 
           } 
          }); 

          // create columns array 
          var columns = [0]; 
          /* the series map is an array of data series 
          * "column" is the index of the data column to use for the series 
          * "roleColumns" is an array of column indices corresponding to columns with roles that are associated with this data series 
          * "display" is a boolean, set to true to make the series visible on the initial draw 
          */ 
          var seriesMap = [{ 
            column: 1, 
            roleColumns: [1], 
            display: true 
           }, { 
            column: 2, 
            roleColumns: [2], 
            display: true 
           }, { 
            column: 3, 
            roleColumns: [3], 
            display: true 
           }, { 
            column: 4, 
            roleColumns: [4], 
            display: true 
           }, { 
            column: 5, 
            roleColumns: [5], 
            display: true 
           }, { 
            column: 6, 
            roleColumns: [6], 
            display: true 
           }, { 
            column: 7, 
            roleColumns: [7], 
            display: true 
           }, { 
            column: 8, 
            roleColumns: [8], 
            display: true 
           }]; 
          var columnsMap = {}; 
          var series = []; 
          for (var i = 0; i < seriesMap.length; i++) { 
           var col = seriesMap[i].column; 
           columnsMap[col] = i; 
           // set the default series option 
           series[i] = {}; 
           if (seriesMap[i].display) { 
            // if the column is the domain column or in the default list, display the series 
            columns.push(col); 
           } 
           else { 
            // otherwise, hide it 
            columns.push({ 
             label: data.getColumnLabel(col), 
             type: data.getColumnType(col), 
             sourceColumn: col, 
             calc: function() { 
              return null; 
             } 
            }); 
            // backup the default color (if set) 
            if (typeof(series[i].color) !== 'undefined') { 
             series[i].backupColor = series[i].color; 
            } 
            series[i].color = '#CCCCCC'; 
           } 
           for (var j = 0; j < seriesMap[i].roleColumns.length; j++) { 
            //columns.push(seriesMap[i].roleColumns[j]); 
           } 
          } 

          chart.setOption('series', series); 

          function showHideSeries() { 
           var sel = chart.getChart().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 (typeof(columns[col]) == 'number') { 
              var src = columns[col]; 

              // hide the data series 
              columns[col] = { 
               label: data.getColumnLabel(src), 
               type: data.getColumnType(src), 
               sourceColumn: src, 
               calc: function() { 
                return null; 
               } 
              }; 

              // grey out the legend entry 
              series[columnsMap[src]].color = '#CCCCCC'; 
             } 
             else { 
              var src = columns[col].sourceColumn; 

              // show the data series 
              columns[col] = src; 
              series[columnsMap[src]].color = null; 
             } 
             var view = chart.getView() || {}; 
             view.columns = columns; 
             chart.setView(view); 
             chart.draw(); 
            } 
           } 
          } 

          google.visualization.events.addListener(chart, 'select', showHideSeries); 

          // create a view with the default columns 
          var view = { 
           columns: columns 
          }; 
          chart.draw(); 
         } 
         else 
         { 
          $('#graph_sales_data').hide(); 
         } 
        }

來源

2015-07-03 07:30:59

相關問題

 相關問題