Question

我有一个数据表，如下所示：

Department, Range, Value
One,   1, 6
One,   2, 7
Three, 3, 4
Two,   4, 3
Two,   5, 7
One,   6, 9
Three, 7, 2

其中Department的值为（One，Two，Three），Range开始为1,2,3,4,5,6,7 ...而Value为0,10之间的随机值，依此类推...... / p>

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

Here is my attempt so far: http://jsfiddle.net/x7pyk55q/2/
But looks X-Axis isn't the Range(1,2,3,4,5,6....) 
and how Y-Axis has two values Department and the Value (I only want Value as Y-Axis)

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/

Google Chart滑块和过滤器

1 个答案: