谷歌图表滑块和过滤器

Question

我有一个数据表，像这样：

部门、范围、价值
一、一、六
一、二、七
三、三、四
二、四、三
二、五、七
一、六、九
三、七、二

其中 Department 的值为 (One,Two,Three)，范围从 1,2,3,4,5,6,7... 开始，值为 0,10 之间的随机值，依此类推...

如何绘制谷歌折线图 X 轴：范围 | Y 轴：值，有两个控件（类别过滤器：部门，范围过滤器：范围）

到目前为止，这是我的尝试：http://jsfiddle.net/x7pyk55q/2/
但看起来 X 轴不是 Range(1,2,3,4,5,6....)
以及 Y 轴如何有两个值 Department 和 Value（我只希望 Value 作为 Y 轴）

html:

<script type="text/javascript" src="//www.google.com/jsapi"></script>
<div id="dashboard_div">
  <div id="filter_div"><!-- Controls renders here --></div>    
  <div id="control_div"><!-- Controls renders here --></div>
  <div id="line_div"><!-- Line chart renders here --></div>
  <div id="table_div"><!-- Table renders here --></div>
</div>

javascript：

google.load('visualization', '1', { packages : ['controls'] } );
google.setOnLoadCallback(createTable);

function createTable() {
  // Create the dataset (DataTable)
  var myData = new google.visualization.DataTable();  
  myData.addColumn('string', 'Department');    
  myData.addColumn('number', 'Pick Sequence');
  myData.addColumn('number', 'Weight');
  myData.addRows([
    ['Three', 1, 9],    
    ['Three',2, 6],    
    ['One',3, 8],    
    ['Two',4, 4],    
    ['Two',5, 3],
    ['Two',6, 9],    
    ['Two',7, 6],    
    ['One',8, 8],    
    ['Two',9, 4],    
    ['Three',10, 3],
    ['One',11, 9],    
    ['Three',12, 6],    
    ['Three',13, 8],    
    ['Two',14, 4],    
    ['One',15, 3],
    ['Two',16, 8],    
    ['One',17, 4],    
    ['One',18, 3],
    ['Three',19, 9],    
    ['Two',20, 6]
  ]);
  var dash_container = document.getElementById('dashboard_div'),
    myDashboard = new google.visualization.Dashboard(dash_container);
  var myDateSlider = new google.visualization.ControlWrapper({
    'controlType': 'ChartRangeFilter',
    'containerId': 'control_div',
    'options': {
      'filterColumnLabel': 'Pick Sequence'
    }
  });
  var categoryPicker = new google.visualization.ControlWrapper({
      'controlType': 'CategoryFilter',
      'containerId': 'filter_div',
      'options': {
        'filterColumnIndex': 0,
        'ui': {
          'label': 'Department:',
          'allowTyping': false,
          'allowMultiple': false
        }
      }
  });

  var myTable = new google.visualization.ChartWrapper({
    'chartType' : 'Table',
    'containerId' : 'table_div'
  });
  myDashboard.bind([myDateSlider, categoryPicker], myTable);  
  var myLine = new google.visualization.ChartWrapper({
    'chartType' : 'LineChart',
    'containerId' : 'line_div',
  });
  myDashboard.bind([myDateSlider, categoryPicker], myLine);
  myDashboard.draw(myData);
}

Answer 1

没关系，我自己解决了。

将 'chartView': { 'columns': [1, 2] } 添加到 var myDateSlider 并将 'view': {'columns': [1, 2]} 添加到 var myLine

enter code here

http://jsfiddle.net/x7pyk55q/4/