折线图滑块使用谷歌可视化仪表板和控件实现

Question

我在使用google visual contorls实现滑块控件时遇到问题。我已经实现了numberRangeFilter作为控件包装器。我有这样的数据表有以下列。

var dataTable = google.visualization.arrayToDataTable([
      ['Year', 'Australia', 'china'],
      [2004,  1000,      400],
      [2005,  1170,      460],
      [2006,  660,       1120],
      [2007,  1030,      540]
      [2008,  1030,      540]

    ]);

所有列都是数字类型。在绘制这个时，我得到以数字格式显示的x轴数据，从https://developers.google.com/chart/interactive/docs/customizing_axes#Discrete_vs_Continuous获得参考并更正了这一点。

这是我的代码：

 var dashboard = new google.visualization.Dashboard( document.getElementById('dashboard_div'));
        var yearRangeSlider = new google.visualization.ControlWrapper({
          'controlType': 'NumberRangeFilter',
          'containerId': 'filter_div',
          'options': {
            'filterColumnIndex': 1,
            'width': '100%',
            'ui': { 'labelStacking': 'horizontal', 'format': { 'pattern':'####','fractionDigits':'0','groupingSymbol':'','showRangeValues':true }}
          },

        });
     // Create a Line chart, passing some options
        var LineChart = new google.visualization.ChartWrapper({
          'chartType': 'LineChart',
          'containerId': 'chart_div',
          'options': {
            'width': 900,
            'height': 500,
            'fontSize':11,
            'hAxis':{'slantedText':'true','direction':'1','format': { 'pattern':'0' }},
            'hAxis.gridlines.color':'#ccc',
            'hAxis': {
                gridlines: {
                    color: 'transparent'
                }
            }

          }
        });
        dashboard.bind(yearRangeSlider, LineChart);
        var dataViewNew = new google.visualization.DataView(dataTable);
           dataViewNew.setColumns([{calc: function(data, row) { 
           return data.getFormattedValue(row, 0); }, type:'string'}, 0,1]);

        dashboard.draw(dataViewNew); 

在这段代码中，我在数据表中添加了一个新的列，类型为string。

var dataViewNew = new google.visualization.DataView(dataTable);
           dataViewNew.setColumns([{calc: function(data, row) { 
           return data.getFormattedValue(row, 0); }, type:'string'}, 0,1]);

现在数据表是这样的。

['Year' 'Year', 'Australia', 'china'],
      ['2004',2004,  1000,      400],
      ['2005',2005,  1170,      460],
      ['2006',2006,  660,       1120],
      ['2007',2007,  1030,      540]
      ['2008',2008,  1030,      540]

在绘制图表后，x轴以字符串格式显示，但在图例中添加了新列。请建议如何从图例中删除新列。