谷歌图表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(); 
}