Как установить hAxis.viewWindow.max для LineChart, когда основная ось - typeofday?

Мне нужно нарисовать диаграмму, чтобы показать эволюцию данных в реальном времени за один день. Я играл на игровой площадке Google Charts, чтобы увидеть, как это будет визуализироваться, но я не смог установить параметр hAxis.viewWindow.max, чтобы чтобы ось X была зафиксирована.

Вот код, который я использовал для тестирования:

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();

  data.addColumn('timeofday', 'x');
  data.addColumn('number', 'S0');
  data.addColumn('number', 'S1');
  data.addColumn('number', 'S2');

  data.addRows([
    [[0,0,0,0],   1,       1,           0.5],
    [[1,0,0,0],   2,       0.5,         1],
    [[2,0,0,0],   4,       1,           0.5],
  ]);

  // Create and draw the visualization.
  new google.visualization.LineChart(document.getElementById('visualization')).
      draw(data, {curveType: "function",
                  width: 500, height: 400,
                  vAxis: {maxValue: 10},
                  hAxis: {maxValue: [23,59,59,0], minValue:[0,0,0,0], viewWindow:{max: [23, 59, 59, 0]}}}
          );
    }

В документации утверждается, что hAxis.viewWindow.max получает номера, но я не нашел способ представить тип "timeofday" как число. Используя это, ось X идет от 0am до 2am, но мне нужна ось для перехода до полуночи.

Я попытался использовать "datetime" в качестве типа столбца с той же проблемой.

Образец ниже, используя числа, работает так, как я намеревался, рисуя линию, где мои точки, но расширяя сетку до моего максимального значения:

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();

  data.addColumn('number', 'x');
  data.addColumn('number', 'S0');
  data.addColumn('number', 'S1');
  data.addColumn('number', 'S2');

  data.addRows([
    [0,   1,       1,           0.5],
    [1,   2,       0.5,         1],
    [2,   4,       1,           0.5],
  ]);

  // Create and draw the visualization.
  new google.visualization.LineChart(document.getElementById('visualization')).
      draw(data, {curveType: "function",
                  width: 500, height: 400,
                  vAxis: {maxValue: 10},
                  hAxis: {maxValue: 23, minValue:0, viewWindow:{max: 23}}}
          );
}

Ответы

Ответ 1

Ось X будет доходить до вашего максимального значения для нее (или закрыть в тех же случаях - как этот). Например

в случае:

data.addRows([
    [[0,0,0,0],   1,       1,           0.5],
    [[1,0,0,0],   2,       0.5,         1],
  ]);

ось x заканчивается на 1:00

в случае:

 data.addRows([
    [[0,0,0,0],   1,       1,           0.5],
    [[1,0,0,0],   2,       0.5,         1],
    [[23,59,59,0],   4,       1,           0.5],
  ]);

он закончится на 23:59:59, показывая 22:00 как последнюю метку оси x.

Это означает, что независимо от значения, которое вы определяете как max в hAxis, график достигает максимального значения "timeofday", которое у вас есть в ваших dataRows (фактически последняя добавленная строка).