Question

我正在尝试使用controlWrapper和Dashboard绘制日期时间图，当我尝试使用ChartRangeFilter作为controlType时，controlWrapper选项中的controlType无法查看图形。如果我使用其他可视化类，如CategoryFilter for controlType，那么一切正常。

有人知道如何用ChartRangeFilter渲染时间吗？

这是示例代码

    <html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>
    <script type='text/javascript' src='http://www.google.com/jsapi'></script>
    <script type='text/javascript'>
        google.load('visualization', '1.1', { 'packages': ['corechart', 'controls'] });
        google.setOnLoadCallback(drawChart)

        var dataTable = null;
        var chartWrapper = null;
        var controlWrapper = null;
        var dashboard = null;

        function drawChart() {
        var data = {"cols": [
        {"id": "Time", "label": "Time", "type": "timeofday"}, 
        {"id": "Calls", "label": "Calls", "type": "number"}], 
        "rows": [
        {"c": [{"v": [0, 10, 57]}, {"v": 45}]}, 
        {"c": [{"v": [1, 9, 58]}, {"v": 23}]}, 
        {"c": [{"v": [2, 10, 55]}, {"v": 12}]}, 
        {"c": [{"v": [3, 0, 7]}, {"v": 23}]}, 
        {"c": [{"v": [4, 10, 54]}, {"v": 12}]}, 
        {"c": [{"v": [5, 35, 57]}, {"v": 56}]}, 
        {"c": [{"v": [6, 29, 11]}, {"v": 234}]}, 
        {"c": [{"v": [7, 11, 52]}, {"v": 34}]}]};

        dataTable = new google.visualization.DataTable(data);

        controlWrapper = new google.visualization.ControlWrapper({
            'controlType': 'CategoryFilter',
            'containerId': 'control',
            'options': {
                'filterColumnIndex': 0, 
                'ui': { 
                    'chartType': 'LineChart', 
                    'chartOptions': { 
                        'chartArea': {'width': '90%'}, 
                        'hAxis': {'baselineColor': 'none'}  
                    },
                    'chartView': { 'columns': [0, 0] }, 
                    'minRangeSize': 43200000
                } 
            } 
        });

        chartWrapper = new google.visualization.ChartWrapper({
            'chartType': 'LineChart',
            'containerId': 'chart',
            'options': {
                "title":"Time of day calls",
                "legend":{"position":"none","alignment":"start"},
                "chartArea":{"height":"80%","width":"90%"},
                "thickness":"1",
                "displayExactValues":true,
                "is3D":false
            }
        });

        dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));

        dashboard.bind(controlWrapper, chartWrapper);
        dashboard.draw(dataTable);
        }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="dashboard">
      <table>
        <tr style='vertical-align: top'>
          <td style='width: 300px; font-size: 0.9em;'>
            <div id="control"></div>
          </td>
          <td style='width: 600px'>
            <div style="float: left;" id="chart"></div>
          </td>
        </tr>
      </table>
    </div>
  </body>
 </html>

Google图表类型tyme of day不适用于ChartRangeFilter

0 个答案: