javascript - Google图表:当我只有1行数据时，“无法读取null的属性'getTime'”

我正在使用Google Charts生成带有javascript的图表。当我在数据数组中设置多行数据时，它可以正常工作，但是当我只有一行数据时，它不能工作。然后我得到错误“无法读取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]

]

当然，日期是一个日期对象。

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

最佳答案

这看起来像某种错误。

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

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>

关于javascript - Google图表:当我只有1行数据时，“无法读取null的属性'getTime'”，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58558549/