消除数据点之间的间隙

Question

Graph: Number of Persons v DateTime

2004-12-23 15:25:01,8
2004-12-23 15:26:01,5
2004-12-23 15:27:01,5
2004-12-23 15:28:01,4
2004-12-23 15:29:01,4
2004-12-24 10:30:01,13
2004-12-24 10:31:01,12
2004-12-24 10:32:01,12
2004-12-24 10:33:01,13
2004-12-24 10:34:01,13
2004-12-24 10:35:01,13

正如我们所看到的，在2004-12-23 15:29:01和2004-12-24 10:30:01之间没有数据，但是使用LineChart时，Google图表仍然显示出一个缺口并连接了两个数据点。另外，由于日期时间很长，因此我避免将日期字符串设置为字符串，因为这样我就不会得到yaxis标记。

我不熟悉Google图表，可以避免吗？

function drawBasic() {

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Date-Time');
  data.addColumn('number', ‘Available);



  data.addRows(dataPoints);
  console.log(data);

    var options = {
    title: ‘Availability',
    legend: {position: 'bottom' },
    hAxis: {
      title: 'Time',
    /*
     viewWindow: {
        min: [7, 30, 0],
        max: [17, 30, 0]
      }*/
    },
    vAxis: {
      title: 'Number of people available’
    }

  };

  var chart = new google.visualization.LineChart(
    document.getElementById('chart_div'));

  chart.draw(data, options);
}

Answer 1

如果使用字符串值而不是日期值，则不会显示任何间隔...

  var dataPoints = [
    ['2004-12-23 15:25:01', 8],
    ['2004-12-23 15:26:01', 5],
    ['2004-12-23 15:27:01', 5],
    ...

此外，这里还需要在图表底部为标签添加更多空间，以及增加默认高度...

    chartArea: {
      bottom: 128
    },
    height: 400

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(drawBasic);

function drawBasic() {
  var dataPoints = [
    ['2004-12-23 15:25:01', 8],
    ['2004-12-23 15:26:01', 5],
    ['2004-12-23 15:27:01', 5],
    ['2004-12-23 15:28:01', 4],
    ['2004-12-23 15:29:01', 4],
    ['2004-12-24 10:30:01', 13],
    ['2004-12-24 10:31:01', 12],
    ['2004-12-24 10:32:01', 12],
    ['2004-12-24 10:33:01', 13],
    ['2004-12-24 10:34:01', 13],
    ['2004-12-24 10:35:01', 13]
  ];

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Date-Time');
  data.addColumn('number', 'Available');
  data.addRows(dataPoints);

  var options = {
    title: 'Availability',
    legend: {position: 'bottom'},
    hAxis: {
      title: 'Time',
    },
    vAxis: {
      title: 'Number of people available'
    },
    chartArea: {
      bottom: 128
    },
    height: 400
  };

  var chart = new google.visualization.LineChart(
    document.getElementById('chart_div')
  );

  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>