Устранение разрыва между точками данных

Question

График: Количество человек 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 но Google Chart показывает мне пробел и соединяет две точки данных при использовании LineChart. Кроме того, я избегаю делать строку с датами, так как тогда я не получу маркировку яксис из-за огромного времени и даты.

Я новичок в использовании Google Charts, можно ли этого избежать?

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>