Произошла ошибка при добавлении параметра фильтра ControlWrapper на панели мониторинга. Что с этим не так?

Question

Произошла ошибка при добавлении параметра фильтра ControlWrapper на панели мониторинга. Что с этим не так?

1

При создании диаграммы Google я обнаружил следующую ошибку.

Ошибка добавления фильтра. Я изменил формат DATE на "hh: mm: ss", но ошибка все еще происходит. Как распечатать график? Какие части я должен исправить?

1.google chart code:

<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>

Сообщение об ошибке:

kyoungwon cho 30 июнь 2017, в 05:06

Источник

Теги:

javascript

charts

google-visualization

google-chartwrapper

1 ответ

Ещё вопросы

WhiteHat · Answer 1 · 2017-06-30T09-22-00.000Z

ошибка 1

значениями в первом столбце массива являются строки ('00:01:01')
как упоминает ошибка, первый столбец должен быть непрерывной осью

вы можете использовать представление данных для преобразования столбца в дату
затем используйте представление, чтобы нарисовать приборную панель

ошибка 2

объект панели инструментов создается с неправильным идентификатором <div>
должен быть → '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>

Я скопировал и запустил код, но он не работает. Как это работает?
проверьте консоль браузера на наличие ошибок - большинство нажмите F12 для инструментов разработчика ...