У Google Data Chart есть 24-часовая ось x

Question

Я использую Google Data Chart, но у меня проблемы с поиском того, что я пытаюсь сделать. Я хочу сделать что-то подобное биржевой диаграмме, но не так сложно.

Я хочу иметь линейную диаграмму или диаграмму области, которая всегда показывает полные 24 часа по оси x независимо от того, какая часть дня.

Я хочу, чтобы дата была заполнена до этого момента дня. Поэтому, если бы у меня было несколько точек данных, то в полдень оно заполняло бы половину графика горизонтально, а другая половина была бы пустой, ожидая данных. Имеют смысл?

Ссылка или пример будет отличным, спасибо.

Answer 1

Многое из этого зависит от того, как вы выглядите, но вот простой пример, предполагающий, что вы используете ваши значения по оси x, представляет собой число, представляющее час. (Т.е. 13,5 в 1:30 вечера)

google.load("visualization", "1", { 
 
    packages: ["corechart"] 
 
}); 
 
google.setOnLoadCallback(drawChart); 
 

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
     ["Time", "Value 1", "Value 2"], 
 
     [3, 9, 4], 
 
     [8.5, 11, 6], 
 
     [10.25, 20, 2], 
 
     [13, 21, 3] 
 
    ]); 
 

 

 
    var options = { 
 
     hAxis: { 
 
      minValue: 0, 
 
      maxValue: 24, 
 
      ticks: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23] 
 
     } 
 
    }; 
 
    var chart = new google.visualization.LineChart(document.getElementById("chart")); 
 
    chart.draw(data, options); 
 
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
 
<div id="chart" style="width: 900px; height: 300px;"></div>