Question

我在创建Google图表时发现以下错误。

添加过滤器时出错。我将DATE格式更改为“hh：mm：ss”，但错误仍然存在。如何打印图表？我应该修复哪些部分？

1.google图表代码：

<html>

<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {
            'packages': ['corechart', 'controls']
        });
        google.charts.setOnLoadCallback(drawDashboard);

        function drawDashboard() {
            var data = google.visualization.arrayToDataTable([
                ['Time', 'user', 'nice', 'system', 'iowait', 'idle'],
                ['00:01:01', 0.24, 0.0, 0.16, 0.27, 99.33],
                ['00:02:01', 0.13, 0.0, 0.04, 0.13, 99.7],
                ['00:03:01', 1.05, 0.0, 0.38, 0.26, 98.3],
                ['00:04:01', 0.44, 0.0, 0.1, 0.15, 99.32],
                ['00:05:01', 0.25, 0.0, 0.08, 0.22, 99.45],
                ['00:06:01', 0.42, 0.0, 0.26, 0.17, 99.15],
                ['00:07:01', 0.99, 0.0, 1.18, 0.24, 97.59],
                ['00:08:01', 0.82, 0.0, 0.3, 0.18, 98.7],
                ['00:09:01', 0.17, 0.0, 0.06, 0.19, 99.58],
                ['00:10:01', 0.18, 0.0, 0.05, 0.16, 99.61],
                ['00:11:01', 0.16, 0.0, 0.05, 0.18, 99.61],
                ['00:12:01', 0.13, 0.0, 0.03, 0.08, 99.76],
                ['00:13:01', 0.19, 0.0, 0.07, 0.22, 99.51],
                ['00:14:01', 0.15, 0.0, 0.03, 0.13, 99.69],
                ['00:15:01', 0.2, 0.0, 0.08, 0.17, 99.55],
                ['00:16:01', 0.48, 0.0, 0.28, 0.16, 99.08],
                ['00:17:01', 0.17, 0.0, 0.07, 0.21, 99.55],
                ['00:18:01', 0.45, 0.0, 0.23, 0.18, 99.13],
                ['00:19:01', 0.17, 0.0, 0.05, 0.23, 99.55],
                ['00:20:01', 0.93, 0.0, 0.37, 0.25, 98.44]
            ]);

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

            var control = new google.visualization.ControlWrapper({
                'controlType': 'ChartRangeFilter',
                'containerId': 'control',
                'options': {
                    'filterColumnIndex': 0,
                    'ui': {
                        'chartType': 'AreaChart',
                        'minRangeSize': 86400000
                    }
                }
            });

            var chart = new google.visualization.ChartWrapper({
                'chartType': 'AreaChart',
                'containerId': 'chart'
            });

            var formatter = new google.visualization.DateFormat({
                pattern: "hh:mm:ss"
            });
            formatter.format(data, 0);

            dashboard.bind(control, chart);
            dashboard.draw(data);
        }
    </script>
</head>

<body>
    <div id="dashboard">
        <div id="chart" style='width: 915px; height: 300px;'></div>
        <div id="control" style='width: 915px; height: 50px;'></div>
</body>

</html>

2.错误消息：

Answer 1

错误1

数组第一列中的值是字符串（'00:01:01'）
如错误所述，第一列必须是continuous axis

您可以使用data view将列转换为日期
然后使用视图绘制仪表板

错误2

使用错误的<div> ID来创建仪表板对象应该是 - ＆gt; 'dashboard' - 不 - 'dashboard_div'

请参阅以下工作代码段...

google.charts.load('current', {
  callback: drawDashboard,
  packages: ['corechart', 'controls']
});

function drawDashboard() {
  var formatDate = new google.visualization.DateFormat({
    pattern: 'yyyy-MM-dd'
  });
  var formatTime = new google.visualization.DateFormat({
    pattern: 'hh:mm:ss'
  });

  var data = google.visualization.arrayToDataTable([['Time', 'user', 'nice', 'system', 'iowait', 'idle'], ['00:01:01', 0.24, 0.0, 0.16, 0.27, 99.33], ['00:02:01', 0.13, 0.0, 0.04, 0.13, 99.7], ['00:03:01', 1.05, 0.0, 0.38, 0.26, 98.3], ['00:04:01', 0.44, 0.0, 0.1, 0.15, 99.32], ['00:05:01', 0.25, 0.0, 0.08, 0.22, 99.45], ['00:06:01', 0.42, 0.0, 0.26, 0.17, 99.15], ['00:07:01', 0.99, 0.0, 1.18, 0.24, 97.59], ['00:08:01', 0.82, 0.0, 0.3, 0.18, 98.7], ['00:09:01', 0.17, 0.0, 0.06, 0.19, 99.58], ['00:10:01', 0.18, 0.0, 0.05, 0.16, 99.61], ['00:11:01', 0.16, 0.0, 0.05, 0.18, 99.61], ['00:12:01', 0.13, 0.0, 0.03, 0.08, 99.76], ['00:13:01', 0.19, 0.0, 0.07, 0.22, 99.51], ['00:14:01', 0.15, 0.0, 0.03, 0.13, 99.69], ['00:15:01', 0.2, 0.0, 0.08, 0.17, 99.55], ['00:16:01', 0.48, 0.0, 0.28, 0.16, 99.08], ['00:17:01', 0.17, 0.0, 0.07, 0.21, 99.55], ['00:18:01', 0.45, 0.0, 0.23, 0.18, 99.13], ['00:19:01', 0.17, 0.0, 0.05, 0.23, 99.55], ['00:20:01', 0.93, 0.0, 0.37, 0.25, 98.44]]);

  var today = formatDate.formatValue(new Date());
  var viewColumns = [{
    calc: function (dt, row) {
      var rowDate = new Date(today + 'T' + dt.getValue(row, 0) + 'Z');
      return {
        v: rowDate,
        f: formatTime.formatValue(rowDate)
      }
    },
    label: data.getColumnLabel(0),
    type: 'date'
  }];

  $.each(new Array(data.getNumberOfColumns()), function (colIndex) {
    if (colIndex === 0) {
      return;
    }
    viewColumns.push(colIndex);
  });

  var view = new google.visualization.DataView(data);
  view.setColumns(viewColumns);

  var dashboard = new google.visualization.Dashboard(
    document.getElementById('dashboard')
  );

  var control = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'control',
    options: {
      filterColumnIndex: 0,
      ui: {
        chartType: 'AreaChart',
        minRangeSize: 86400000
      }
    }
  });

  var chart = new google.visualization.ChartWrapper({
    chartType: 'AreaChart',
    containerId: 'chart'
  });

  dashboard.bind(control, chart);
  dashboard.draw(view);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
  <div id="chart"></div>
  <div id="control"></div>
</div>

在仪表板中添加ControlWrapper过滤器设置时发生错误。这有什么问题？

1 个答案: