Google Chart不同数据显示在同一页面并可用时间轴控制多个Chart

最近我在工作中遇到一个问题，需求是要在SNS站点个人中心实现个人心情，运气，人气等随时间变化的图表。
我们选择用Google Chart做，这几天我做了一个例子，代码如下：
++++++++++++++++++++++++++++++++++++++　START　++++++++++++++++++++++++++++++++++++++++++++++++
<html>
  <head>
    
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">      // Load the Visualization API and the controls package.
      google.load('visualization', '1.0', {'packages':['controls']});
  // google.load( 'visualization', 1 );      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawDashboard);      // Callback that creates and populates a data table,
      // instantiates a dashboard, a range slider and a pie chart,
      // passes in the data and draws it.
      function drawDashboard() {        // Create our data table.
        var data = google.visualization.arrayToDataTable([
['Name', 'Age', 'Donuts eaten'],
['Michael' , 12, 5],
['Elisa',  20, 7],
['Robert',7, 3],
['John',  54, 2],
['Jessica',  22, 6],
['Aaron',  3, 1],
['Margareth', 42, 8]
        ]);        // Create a dashboard.
        var dashboard = new google.visualization.Dashboard(
            document.getElementById('dashboard_div'));        // Create a range slider, passing some options
        var donutRangeSlider = new google.visualization.ControlWrapper({
          'controlType': 'NumberRangeFilter',
          'containerId': 'filter_div',

          'options': {
           // 'filterColumnLabel': 'Donuts eaten',
'filterColumnIndex': 2,
'ui':{label: 'Name', labelSeparator: ':', labelStacking:'vertical',realtimeTrigger:true },
'minValue':'0',
'maxValue':'4'
          },
  'state': {'lowValue': 0, 'highValue': 2}
        });         // Create a pie chart, passing some options
        var columnChart = new google.visualization.ChartWrapper({
          'chartType': 'ColumnChart',
          'containerId': 'chart_column_div',

          'options': {
            'width': 300,
            'height': 200,
'legend': 'none',
            'title': 'columnChart'
          }
        });
//columnChart.draw(); // Create a pie chart, passing some options
        var pieChart = new google.visualization.ChartWrapper({
          'chartType': 'PieChart',
          'containerId': 'chart_pie_div',

          'options': {
            'width': 300,
            'height': 200,
            'pieSliceText': 'value',
            'legend': 'left',
'title': 'pieChart'
          }
        });

/*
'containerId':'visualization',
        'query':'SELECT A,D WHERE D > 100 ORDER BY D',
        'options': {'title':'Population Density (people/km^2)', 'legend':'none'}
*/
// Create a pie chart, passing some options
        var lineChart = new google.visualization.ChartWrapper({
          'chartType': 'LineChart',
          'containerId': 'chart_line_div',

          'options': {
            'width': 300,
            'height': 200,
            'legend': 'none',
'title': 'lineChart'
          }
        });

        // Establish dependencies, declaring that 'filter' drives 'pieChart',
        // so that the pie chart will only display entries that are let through
        // given the chosen slider range.
        dashboard.bind(donutRangeSlider, [columnChart,pieChart,lineChart]);        // Draw the dashboard.      data
        dashboard.draw( data ); //var wrapper = new google.visualization.ChartWrapper({ columnChart });
//wrapper.draw();      }    </script>
  </head>  <body>
    
    <div id="dashboard_div">
      
      <div id="filter_div"></div>
      <div id="chart_column_div"></div>
  <div id="chart_pie_div"></div>
  <div id="chart_line_div"></div>
    </div>
  </body>
</html>
+++++++++++++++++++++++++++++++++++++++　END　++++++++++++++++++++++++++++++++++++++++
　这个例子基本实现了可以通过bar来控制三个图表的X轴的功能，但是存在以下点问题：
1.上方的bar虽然可以控制下方的图表，但是怎么让它（bar）的显示变为时间轴的样式？
2.三个图表表现的同一数据，怎么让它们呈现不同的数据在各自和图表上，并还能用bar(时间轴控制)？参考网站，http://www.patientslikeme.com/profile　我们想做成那样的效果。求高人解答！不胜感激！！

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

google.load('visualization', '1.0', {'packages':['controls']});  // Set a callback to run when the Google Visualization API is loaded.
  google.setOnLoadCallback(drawDashboard);  function drawDashboard() {  // Create our data table.
  var data = google.visualization.arrayToDataTable([
['Name', 'Age', 'Donuts eaten'],
['Michael' , 12, 5],
['Elisa', 20, 7],
['Robert',7, 3],
['John', 54, 2],
['Jessica', 22, 6],
['Aaron', 3, 1],
['Margareth', 42, 8]
  ]);  // Create a dashboard.
  var dashboard = new google.visualization.Dashboard(
  document.getElementById('dashboard_div'));  // Create a range slider, passing some options
  var donutRangeSlider = new google.visualization.ControlWrapper({
  'controlType': 'NumberRangeFilter',
  'containerId': 'filter_div',

  'options': {
'filterColumnIndex': 2,
'ui':{label: 'Name', labelSeparator: ':', labelStacking:'vertical',realtimeTrigger:true },
'minValue':'0',
'maxValue':'4'
  },
'state': {'lowValue': 0, 'highValue': 2}
  });   // Create a pie chart, passing some options
  var columnChart = new google.visualization.ChartWrapper({
  'chartType': 'ColumnChart',
  'containerId': 'chart_column_div',

  'options': {
  'width': 300,
  'height': 200,
'legend': 'none',
  'title': 'columnChart'
  }
  });// Create a pie chart, passing some options
  var pieChart = new google.visualization.ChartWrapper({
  'chartType': 'PieChart',
  'containerId': 'chart_pie_div',

  'options': {
  'width': 300,
  'height': 200,
  'pieSliceText': 'value',
  'legend': 'left',
'title': 'pieChart'
  }
  });// Create a pie chart, passing some options
  var lineChart = new google.visualization.ChartWrapper({
  'chartType': 'LineChart',
  'containerId': 'chart_line_div',

  'options': {
  'width': 300,
  'height': 200,
  'legend': 'none',
'title': 'lineChart'
  }
  });  dashboard.bind(donutRangeSlider, [columnChart,pieChart,lineChart]);  // Draw the dashboard. data
  dashboard.draw( data );  }