Мне нужно нарисовать диаграмму, чтобы показать эволюцию данных в реальном времени за один день. Я играл на игровой площадке 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}}}
);
}