Google Charts: «Не удается прочитать свойство 'getTime' из null», когда у меня есть только 1 строка данных - PullRequest
Новая
       0

Google Charts: «Не удается прочитать свойство 'getTime' из null», когда у меня есть только 1 строка данных

1 голос
/ 25 октября 2019

Я использую Google Charts для создания диаграмм с использованием JavaScript. Он отлично работает, когда я устанавливаю несколько строк данных в массив данных, но не работает, когда у меня есть только 1 строка данных. Затем я получаю сообщение об ошибке «Не удается прочитать свойство 'getTime' из null".

Этот массив работает нормально: 

[

 ["Date", "Amount"]

 [Wed Oct 20 2019 00:00:00 GMT+200 (Mitteleuropäische Sommerzeit), 9576]

 [Wed Oct 21 2019 00:00:00 GMT+200 (Mitteleuropäische Sommerzeit), 4810]

 [Wed Oct 22 2019 00:00:00 GMT+200 (Mitteleuropäische Sommerzeit), 5058]

 [Wed Oct 23 2019 00:00:00 GMT+200 (Mitteleuropäische Sommerzeit), 5381]

]

Этот массив не работает: 

[

 ["Date", "Amount"]

 [Wed Oct 16 2019 00:00:00 GMT+200 (Mitteleuropäische Sommerzeit), 51099]

]

Конечно, дата - это объект даты. 

// Set chart style
switch(chart_style) {
    case "linien":
        google.charts.load('current', {packages:['corechart'], 'language': 'de'});
        break;
    case "timeseries":
        google.charts.load('current', {packages:['annotationchart'], 'language': 'de'});
        break;
    case "spalten":
        google.charts.load('current', {packages:['corechart'], 'language': 'de'});
        break;
    case "tabelle":
        google.charts.load('current', {packages: ['table'], 'language': 'de'});
        break;
    default:
        google.charts.load('current', {packages:['corechart'], 'language': 'de'});
}

google.charts.setOnLoadCallback(drawChart);

function drawChart() {

    var data = google.visualization.arrayToDataTable(dataArray);

    var options = {
        displayAnnotations: true,
        animation:{
            duration: 600,
            easing: 'out',
            startup: true
        },
        //theme: 'material',
        curveType: 'function',
        legend: { position: 'right' },
        hAxis: {title: hAxisTitle, format: hAxisFormat},
        vAxis: {title: "Besuchermenge für Abfrage", minValue: 0, maxValue: 0},
        pointSize: 5,
        series: {
            0: { color: '#1f4e79'},
            1: { color: '#FF8C00'},
            },
        explorer: {
            axis: 'horizontal',
            keepInBounds: false,
            maxZoomIn:0.1,
            maxZoomOut:4
        },
        language: 'de'
    };

    switch(chart_style) {
        case "linien":
            var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
            break;
        case "timeseries":
            var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));
            break;
        case "spalten":
            var chart = new google.visualization.ColumnChart(document.getElementById("chart_div"));
            break;
        case "tabelle":
            var chart = new google.visualization.Table(document.getElementById("chart_div"));
            break;
        default:
            var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
        }

    chart.draw(data, options);
}

Поскольку для публикации изображений мне нужно как минимум 10 репутаций, я могу публиковать только ссылки на снимки экрана.

Снимок экрана с работающим массивом:https://i.imgur.com/xHsEZrl.png

Снимок экрана рабочего графика: https://i.imgur.com/LZUt7zN.png

Снимок экрана массива, который не работает: https://i.imgur.com/Qy0InSy.png

Снимок экрана диаграммы с массивом, которыйне работает: https://i.imgur.com/WRRIlRV.png

Я бы ожидал, что на диаграмме будет показан один столбец посередине с датой под ним в качестве метки оси x.

1 Ответ

0 голосов
/ 25 октября 2019

это похоже на какую-то ошибку.

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

var ticks = null;
if (data.getNumberOfRows() === 1) {
  data.addRow([null, null]);
  ticks = [data.getValue(0, 0)];
}

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
      ["Date", "Amount"],
      [new Date(2019, 9, 16), 51099]
  ]);

  var ticks = null;
  if (data.getNumberOfRows() === 1) {
    data.addRow([null, null]);
    ticks = [data.getValue(0, 0)];
  }

  console.log('abc');

  var options = {
      displayAnnotations: true,
      animation:{
          duration: 600,
          easing: 'out',
          startup: true
      },
      //theme: 'material',
      curveType: 'function',
      legend: { position: 'right' },
      hAxis: {title: 'Title', format: 'MM/dd/yy', ticks: ticks},
      vAxis: {title: "Besuchermenge für Abfrage", minValue: 0, maxValue: 0},
      pointSize: 5,
      series: {
          0: { color: '#1f4e79'},
          1: { color: '#FF8C00'},
      },
      explorer: {
          axis: 'horizontal',
          keepInBounds: false,
          maxZoomIn:0.1,
          maxZoomOut:4
      },
      language: 'de'
  };

  var chart = new google.visualization.ColumnChart(document.getElementById("chart_div"));
  chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
...