谷歌圖表API選擇選擇系列以突出顯示

Question

使用谷歌圖表API [https://developers.google.com/chart/interactive/docs/events]我有一個格式正確的ComboChart和格式正確的谷歌呈現數據表。

我能夠使用setSelection（）函數 - 但是，選擇是突出顯示我的平均線，它貫穿在條形圖的中間。

我無法弄清楚如何使圖表/圖形區域上突出顯示的「點」出現在其他系列/數據集上（例如，突出顯示條而不是平均線 - 根據任何平均值，是一條直線穿過中間，對我的最終用戶來說沒有任何意義）。

如果你願意的話，我可以添加一些代碼到JS小提琴中，但它實際上只是一個基本的谷歌組合圖，它顯示了幾個不同的酒吧作爲我的主要數據集和平均線作爲我的系列'1'（以0爲底）。

編輯：添加JS小提琴：http://jsfiddle.net/GSryX/

[code] 
some code 
[/code] 

任何想法？

Answer 1

設置選擇時，請確保所選對象的「列」參數引用DataTable中的正確列。

編輯：

如果酒吧是太小，無法顯示選擇的效果，你可以改用一個黑客這樣http://jsfiddle.net/asgallant/5SX8w/來改變選擇欄顏色。當你只有一系列數據時，這是最好的;如果您的系列數超過1個，則需要修改，並且可能無法正確顯示，除非您使用堆疊酒吧。

function drawChart() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Name'); 
    data.addColumn('number', 'Value'); 
    data.addRows([ 
     ['Foo', 94], 
     ['Bar', 23], 
     ['Baz', 80], 
     ['Bat', 47], 
     ['Cad', 32], 
     ['Qud', 54] 
    ]); 

    var chart = new google.visualization.ChartWrapper({ 
     chartType: 'ColumnChart', 
     containerId: 'chart_div', 
     dataTable: data, 
     options: { 
      // setting the "isStacked" option to true fixes the spacing problem 
      isStacked: true, 
      height: 300, 
      width: 600, 
      series: { 
       1: { 
        // set the color to change to 
        color: '00A0D0', 
        // don't show this in the legend 
        visibleInLegend: false 
       } 
      } 
     } 
    }); 

    google.visualization.events.addListener(chart, 'select', function() { 
     var selection = chart.getChart().getSelection(); 
     if (selection.length > 0) { 
      var newSelection = []; 
      // if row is undefined, we selected the entire series 
      // otherwise, just a single element 
      if (typeof(selection[0].row) == 'undefined') { 
       newSelection.push({ 
        column: 2 
       }); 
       chart.setView({ 
        columns: [0, { 
         type: 'number', 
         label: data.getColumnLabel(1), 
         calc: function() { 
          // this series is just a placeholder 
          return 0; 
         } 
        }, 1] 
       }); 
      } 
      else { 
       var rows = []; 
       for (var i = 0; i < selection.length; i++) { 
        rows.push(selection[i].row); 
        // move the selected elements to column 2 
        newSelection.push({ 
         row: selection[i].row, 
         column: 2 
        }); 
       } 

       // set the view to remove the selected elements from the first series and add them to the second series 
       chart.setView({ 
        columns: [0, { 
         type: 'number', 
         label: data.getColumnLabel(1), 
         calc: function (dt, row) { 
          return (rows.indexOf(row) >= 0) ? null : {v: dt.getValue(row, 1), f: dt.getFormattedValue(row, 1)}; 
         } 
        }, { 
         type: 'number', 
         label: data.getColumnLabel(1), 
         calc: function (dt, row) { 
          return (rows.indexOf(row) >= 0) ? {v: dt.getValue(row, 1), f: dt.getFormattedValue(row, 1)} : null; 
         } 
        }] 
       }); 
      } 
      // re-set the selection when the chart is done drawing 
      var runOnce = google.visualization.events.addListener(chart, 'ready', function() { 
       google.visualization.events.removeListener(runOnce); 
       chart.getChart().setSelection(newSelection); 
      }); 
     } 
     else { 
      // if nothing is selected, clear the view to draw the base chart 
      chart.setView(); 
     } 
     chart.draw(); 
    }); 

    chart.draw(); 
}