Изменить формат даты и времени на графике времени Google Graph

Question

У меня есть Google Graph, который показывает значения температуры/Epoch Datetime Я хотел бы переключить с помощью кнопки даты по оси X в формате 24h следующим образом: 'dd/MM/yyyy HH : mm 'вместо текущего формата AM/PM.

По некоторым причинам я не могу заставить его работать, даты пребывания в AM PM. Можете ли вы сказать мне, что не так?

https://jsfiddle.net/lcoulon/ds7vgLvd/

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

 
google.charts.setOnLoadCallback(drawChart); 
 

 

 
function drawChart() { 
 

 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('datetime', 'Date'); 
 
    data.addColumn('number', 'Temperatures'); 
 

 
    data.addRows([ 
 
    [new Date(1485320400000), 22.5], 
 
    [new Date(1485342000000), 23.8], 
 
    [new Date(1485360000000), 24.2], 
 
    [new Date(1485363600000), 21.0], 
 
    [new Date(1485410400000), 25.5], 
 
    [new Date(1485439200000), 23.0], 
 
    ]); 
 

 

 
    var options = { 
 
    title: 'X Axis datetime epoch (ms)/Y Axis Temperature (°C)', 
 
    width: 900, 
 
    height: 500, 
 
    hAxis: { 
 

 
     gridlines: { 
 
     count: 15 
 
     } 
 
    }, 
 
    vAxis: { 
 
     gridlines: { 
 
     color: 'none' 
 
     }, 
 
     minValue: 0 
 
    } 
 
    }; 
 

 
    var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
 

 
    chart.draw(data, options); 
 

 
    var button = document.getElementById('change'); 
 

 

 

 
    button.onclick = function() { 
 

 
    // If the format option matches, change it to the new option, 
 
    // if not, reset it to the original format. 
 
    options.hAxis.format === 'M/d/yy' ? 
 
     options.hAxis.format = 'dd/MM/yyyy HH:mm' : 
 
     options.hAxis.format = 'M/d/yy'; 
 

 
    chart.draw(data, options); 
 
    }; 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
 

 
<button id="change">Click to change the format</button> 
 
<div id="chart_div"></div>

Answer 1

кажется, что в соответствии с the docs, формат даты и времени устанавливается отдельно (перейти к самой нижней части страницы):

hAxis: { 
     viewWindow: { 
     min: new Date(2014, 11, 31, 18), 
     max: new Date(2015, 0, 3, 1) 
     }, 
     gridlines: { 
     count: -1, 
     units: { 
      days: {format: ['MMM dd']},  // <----- 
      hours: {format: ['HH:mm', 'ha']}, // <----- 
     } 
     }, 
     minorGridlines: { 
     units: { 
      hours: {format: ['HH:mm', 'ha']},  // <----- 
      minutes: {format: ['HH:mm a Z', ':mm']} // <----- 
     } 
     } 
    }