2017-01-26 2 views
0

気温の値/エポックの日時を示すGoogleグラフがあります ボタンを使って、x軸の日付を24時間形式で切り替えるとします。 'dd/MM/yyyy HH現在のAM/PMフォーマットの代わりに:mm 'Googleグラフのタイムラインで日時フォーマットを変更する

いくつかの理由から、私はそれが動作を得ることができない、日付は、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>

答えて

0

(ページの一番下に行く)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']} // <----- 
     } 
     } 
    } 
+0

ありがとうRobG、この方法を適用すると、垂直軸が-1から1に変更されました。どうすればこの軸をautomaticaに設定できますかY軸の最小と最大のデータ範囲に合っていますか? https://jsfiddle.net/lcoulon/ds7vgLvd/1/ –

関連する問題