9

我使用 Google Charts API 用 javascript 绘制数据。日期时间数据视图的默认格式是上午/下午 12 小时格式。如何更改视图以显示 24 小时格式？下面显示了一个代码示例，其中使用了默认的日期时间格式：

var price_data = new google.visualization.DataTable();
         price_data.addColumn('datetime','Time');
         price_data.addColumn('number','Price [øre/KWh]');

price_data.add_row([new Date(2013,23,3,4,5),3])
price_data.add_row([new Date(2013,1,5,4,5),9])

var options = {
      title: 'Price'
    };

var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
4

2 回答 2

21

您需要使用DateFormatter格式化日期时间。

// format dates
// ex: "August 5, 2013 1:45 PM" formatted as "05/08/2013 13:45"
var dateFormatter = new google.visualization.DateFormat({pattern: 'dd/MM/yyyy HH:mm'});
dateFormatter.format(data, 0);

hAxis.format您可以通过设置选项来格式化轴标签：

var options = {
    hAxis: {
        format: 'dd/MM/yyyy HH:mm'
    }
    title: 'price'
};

日期格式支持大多数ISO 日期格式模式。

于 2013-09-05T15:47:04.313 回答
0

你可以简单地在你的选项中传递这个，

hAxis: {
        title: 'Time of day',
        format: 'hh:mm a'
    }


    google.charts.load('current', {'packages':['bar']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('timeofday', 'Time of Day');
      data.addColumn('number', 'Emails Received');

      data.addRows([
        [[8, 30, 45], 5],
        [[9, 0, 0], 10],
        [[10, 0, 0, 0], 12],
        [[10, 45, 0, 0], 13],
        [[11, 0, 0, 0], 15],
        [[12, 15, 45, 0], 20],
        [[13, 0, 0, 0], 22],
        [[14, 30, 0, 0], 25],
        [[15, 12, 0, 0], 30],
        [[16, 45, 0], 32],
        [[16, 59, 0], 42]
      ]);

      var options = {
        title: 'Total Emails Received Throughout the Day',
        height: 450,
        hAxis: {format:'hh:mm a'}
      };

      var chart = new google.charts.Bar(document.getElementById('chart_div'));

      chart.draw(data, google.charts.Bar.convertOptions(options));
    }
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   
 <div id="chart_div"></div>

于 2019-04-10T17:10:06.487 回答