Вопросы Теги

Создание линейной диаграммы Google с использованием переданного массива JSON

Попробуйте это - 

$(document).on( 'click', '.click-activity', function () { ... });
1
задан kfear 28 March 2019 в 01:26
поделиться

1 ответ

Здесь есть несколько вопросов, сначала свидание.

вы не сможете получить фактическую дату / время из этой строки -> "new Date(2019, 3, 26, 16, 13, 15)"
без использования метода eval, который я бы не рекомендовал.

Кроме того, в javascript, при использовании этого конкретного конструктора даты,
месяц основан на нуле, означая -> January = 0

как таковой, вышеуказанная дата будет выглядеть как 26 апреля , я думаю, что вы хотите 26 марта .

вот доказательство (запустите следующий фрагмент) ... 

var testDate = eval("new Date(2019, 3, 26, 16, 13, 15)");
console.log(testDate);

рекомендуют изменить формат на - -> 3/26/2019 16:13:15
{date: "3/26/2019 16:13:15", ifDesc: "lo", ifInOctets: "2147483647"}
затем преобразуйте в datetime в javascript -> new Date(value.date)

далее, диаграмма ожидает каждого ifDesc находиться в своем собственном столбце таблицы данных,
, как в следующей структуре ... 

['Date', 'lo', 'Port1', 'Port2', 'Port6', 'img0'],
[new Date('3/26/2019 16:13:15'), 2147483647, 2147483647, 2147483647, 2147483647, 906413834],

это будет трудно встроить в запрос без жесткого кодирования.

Вместо этого мы можем использовать представление данных Google, чтобы создать необходимую структуру.

передать JSON через AJAX в следующей структуре.

{date: "3/26/2019 16:13:15", ifDesc: "lo", ifInOctets: "2147483647"}

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

[112 ]

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

var viewColumns = [0];
var distinctLabels = data.getDistinctValues(1);
$.each(distinctLabels, function (index, label) {
  viewColumns.push({
    calc: function (dt, row) {
      if (dt.getValue(row, 1) === label) {
        return dt.getValue(row, 2);
      }
      return null;
    },
    type: 'number',
    label: label
  });
});
var view = new google.visualization.DataView(data);
view.setColumns(viewColumns);

см. Следующий рабочий фрагмент ... 

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var jsonData = [
    {date: "3/26/2019 16:13:15", ifDesc: "lo", ifInOctets: "2147483647"},
    {date: "3/26/2019 16:13:15", ifDesc: "Port1", ifInOctets: "2147483647"},
    {date: "3/26/2019 16:13:15", ifDesc: "Port2", ifInOctets: "2147483647"},
    {date: "3/26/2019 16:13:16", ifDesc: "Port6", ifInOctets: "2147483647"},
    {date: "3/26/2019 16:13:16", ifDesc: "imq0", ifInOctets: "906413834"},
    {date: "3/26/2019 16:17:31", ifDesc: "lo", ifInOctets: "2147483647"},
    {date: "3/26/2019 16:17:49", ifDesc: "Port1", ifInOctets: "2147483647"},
    {date: "3/26/2019 16:17:53", ifDesc: "Port2", ifInOctets: "171330279"},
    {date: "3/26/2019 16:17:57", ifDesc: "Port6", ifInOctets: "2147483647"},
    {date: "3/26/2019 16:17:57", ifDesc: "imq0", ifInOctets: "1103910085"},
    {date: "3/26/2019 16:20:38", ifDesc: "lo", ifInOctets: "2147483647"},
    {date: "3/26/2019 16:20:39", ifDesc: "Port1", ifInOctets: "2147483647"},
    {date: "3/26/2019 16:20:40", ifDesc: "Port2", ifInOctets: "194386054"},
    {date: "3/26/2019 16:20:41", ifDesc: "Port6", ifInOctets: "2147483647"},
    {date: "3/26/2019 16:20:42", ifDesc: "imq0", ifInOctets: "1128562685"}
  ];

  drawInterfaceChart(jsonData, 'chart_div');

  function drawInterfaceChart(array, divR) {
    var dataSet = [];
    $.each(array, function (data, value) {
      dataSet.push([new Date(value.date), value.ifDesc, parseFloat(value.ifInOctets)]);
    });
    var data = google.visualization.arrayToDataTable(dataSet, true);

    var viewColumns = [0];
    var distinctLabels = data.getDistinctValues(1);
    $.each(distinctLabels, function (index, label) {
      viewColumns.push({
        calc: function (dt, row) {
          if (dt.getValue(row, 1) === label) {
            return dt.getValue(row, 2);
          }
          return null;
        },
        type: 'number',
        label: label
      });
    });
    var view = new google.visualization.DataView(data);
    view.setColumns(viewColumns);

    var chart = new google.visualization.LineChart(document.getElementById(divR));
    var options = {
      title: '',
      legend: {position: 'right'},
      interpolateNulls: true  // <-- add this option
    };
    chart.draw(view, options);  // <-- use view to draw chart
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

0
ответ дан WhiteHat 28 March 2019 в 01:26
поделиться
Другие вопросы по тегам:

Похожие вопросы: