Change to a 24 hour format for datetime data in Google Charts

前端 未结 2 1674
走了就别回头了
走了就别回头了 2021-02-15 06:16

Im plotting data with javascript using the Google Charts API. The default format for datetime data view is the 12 hour am/pm format. How can I change the view to show a 24 hour

相关标签:
2条回答
  • 2021-02-15 06:52

    You can simply pass this in your options,

    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>
    
       

    0 讨论(0)
  • 2021-02-15 06:57

    You need to format the datetimes using a 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);
    

    You can format the axis labels by setting the hAxis.format option:

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

    The date formats support most of the ISO date formatting patterns.

    0 讨论(0)
提交回复
热议问题