让谷歌数据图表有一个24小时x轴

Have Google Data Chart have a 24 hour x-axis

本文关键字：24小时 有一个 谷歌 数据      更新时间：2023-09-26

我正在使用谷歌数据图表，但很难找到我要做的事情。我想做一些类似于股票图表的事情，但不要那么复杂。

我想要一个折线图或面积图，无论一天中的什么时候，都能在x轴上显示整个24小时。

我只想把日期填到一天中的那个时候。因此，如果我有多个数据点，在中午，它只会水平地填充一半的图形，而另一半将是空的，等待数据。有道理吗？

一个链接或例子会很好，谢谢。

这在很大程度上取决于你的长相，但这里有一个简单的例子，假设你使用的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>

相关文章：