Javascript 谷歌图表仪表板中使用图例过滤的错误

我有一个通过rangefilter和单击图例过滤的仪表板。除了单击图例中的第一个项目外，它工作正常。我不确定这里出了什么问题

可在此链接中查看工作代码：

var列=[]；
var级数={}；
对于（var i=0；i0）{
系列[i-1]={}；
}
}
google.visualization.events.addListener（图表'select'，函数（）{
var sel=dash.getSelection（）；
//如果选择长度为0，则取消选择一个元素
如果（选择长度>0）{
//如果行未定义，则单击图例
如果（sel[0]。行===null）{
var col=sel[0]。列；
if（列[col]==col）{
//隐藏数据系列
列[col]={
标签：data.getColumnLabel（col），
类型：data.getColumnType（col），
计算：函数（）{
返回null；
}
};
//灰色显示图例条目
系列[col-1]。颜色='#cccc'；
}否则{
//显示数据系列
列[col]=col；
系列[col-1]。颜色=null；
}
//设置系列选项
图表.设置选项（“系列”，系列）；
var view=newgoogle.visualization.DataView（数据）；
view.setColumns（列）；
虚线绑定（[rangeFilter]，[chart]）；
破折号。绘制（视图）；
}
}
});

不确定数据视图发生了什么，
但是直接在图表包装器上设置视图，
似乎工作正常

请参阅以下工作片段

google.charts.load（'current'{
回调：图纸，
包：['controls']
});
函数绘图图（）{
var query=new google.visualization.query（“https://docs.google.com/spreadsheets/d/1xUzHqQjFRV3CcCEmsVUezz4hzwHDxPFW15f5Da0xBS0/edit#gid=0&headers=1&tq?range=A1:AA42");
发送（handleQueryResponse）；
}
函数handleQueryResponse（响应）{
var data=response.getDataTable（）；
var rangeFilter=new google.visualization.ControlWrapper({
controlType:“ChartRangeFilter”，
containerId:'范围\过滤器\分区'，
选项：{
filterColumnIndex:0，
用户界面：{
图表选项：{
身高：50，
宽度：1000，//在图表和控件中必须相同
图表区：{
宽度：“70%”//图表和控件中的宽度必须相同
}
},
图表视图：{
列：[0,1]
}
}
},
声明：{
范围：{
//将起始范围设置为2012年1月
开始日期：新日期（1940年），
完：新日期（1990年）
}
}
});
var chart=new google.visualization.ChartWrapper({
图表类型：“线条图”，
集装箱船：“海图分区”，
选项：{
//宽度和chartArea.width对于筛选器和图表应相同
身高：600，
宽度：1000，
图例：{textStyle:{fontSize:12}}，
图表区：{
宽度：“70%”
}
}
});
//创建仪表板
var dash=new google.visualization.Dashboard（document.getElementById（'Dashboard'）；
//将图表绑定到筛选器
虚线绑定（[rangeFilter]，[chart]）；
//绘制仪表板
破折号.绘图（数据）；
var列=[]；
var级数={}；
对于（var i=0；i0）{
系列[i-1]={}；
}
}
google.visualization.events.addListener（图表'select'，函数（）{
var sel=dash.getSelection（）；
//如果选择长度为0，则取消选择一个元素
如果（选择长度>0）{
//如果行未定义，则单击图例
如果（sel[0]。行===null）{
var col=sel[0]。列；
if（列[col]==col）{
//隐藏数据系列
列[col]={
标签：data.getColumnLabel（col），
类型：data.getColumnType（col），
计算：函数（）{
返回null；
}
};
//灰色显示图例条目
系列[col-1]。颜色='#cccc'；
}否则{
//显示数据系列
列[col]=col；
系列[col-1]。颜色=null；
}
//设置系列选项&查看列
图表.设置选项（“系列”，系列）；
setView（{columns:columns}）；
破折号.绘图（数据）；
}
}
});
}

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 = dash.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;
      }

      // set series option
      chart.setOption('series', series);

      var view = new google.visualization.DataView(data);
      view.setColumns(columns);
      dash.bind([rangeFilter], [chart]);
      dash.draw(view);
    }
  }
});