javascript - 谷歌图表 : "Cannot read property ' getTime' of null"when I only have 1 row of data

Question

我正在使用 Google Charts 通过 javascript 生成图表。当我将多行数据设置到我的数据数组时它工作正常，但当我只有 1 行数据时它不起作用。然后我收到错误“无法读取 null 的属性‘getTime’”。

这个数组工作正常:

[

 ["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]

]

当然 date 是一个日期对象。

// 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 轴标签。

Answer 1

这看起来像是某种错误。

作为解决方法，您可以检查行数，
如果只有一个，则在数据表中添加一个空行。
这将使图表能够正确绘制。
您可能还想添加一个勾号，否则它只会显示广泛的年份......

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>