2016-03-22 14 views
1

hAxisをタイムラインとして設定しました。私のクライアントは、GMTオフセットが横に印刷された24時間制の時刻と日付を表示する必要があります。私のコードはかなり単純ですが、 "GMT"ラベルは面白い副作用を生成しています。月に取得するための、おそらくGを渡した結果である "GMT"、からGoogle Charts用の「GMT」のエスケープタイムスタンプ

6:03 AD3T+7 
03/21/2016 

AD3TとM(3

ここに私の書式コードです:"format": 'H:MM '+' GMT'+$scope.offset.toString()+'\r\n MM/dd/yyyy'が、結果は(ADを取得するには?) )、Tは明らかに効果がありません。

私の質問は、Google Charts JSONオブジェクトで、人間が判読可能なラベル「GMT」とオフセットを持つようにタイムスタンプをフォーマットするにはどうすればよいですか? 「GMT」から脱出する必要がありますか?もしそうなら、どうですか?

答えて

1

書式を適用するにはいくつさまざまな方法がありますが、最も簡単にはhAxis.format
され、それが利用可能な全てのパターンについて詳細な説明ICU pattern set
参照テーブルに従います。

これは、オフセットを含めて、これが近くになるかもしれないと思います。
'H:MM ZZZZ \r\n MM/dd/yyyy'

独自の目盛りを付けることもできます。
JavaScriptで生成された独自のカスタムフォーマットを適用できることを意味します。
次の例では、この書式設定が既に行われていることを前提としています。

hAxis.formatを使用して2つの例、1である次の
{v: new Date(2013, 4, 5, 3, 6, 0, 0), f: '3:05 GMT-04:00 \r\n 05/05/2013'}

を表示する必要が各目盛りの配列
1にGoogleが列値を受け入れる一般的なオブジェクトを提供し、他のticks ...

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

 
function drawChart() { 
 
    var data = [ 
 
    ['Date', 'Value'],       //provide custom formatting 
 
    [ {v: new Date(2013, 4, 4, 1, 3, 0, 0), f: '1:05 GMT-04:00 \r\n 05/04/2013'}, 38177], 
 
    [ {v: new Date(2013, 4, 5, 3, 6, 0, 0), f: '3:05 GMT-04:00 \r\n 05/05/2013'}, 38705], 
 
    [ {v: new Date(2013, 4, 12, 2, 4, 0, 0), f: '2:05 GMT-04:00 \r\n 05/12/2013'}, 38210], 
 
    [ {v: new Date(2013, 4, 13, 4, 8, 0, 0), f: '4:05 GMT-04:00 \r\n 05/13/2013'}, 38029], 
 
    [ {v: new Date(2013, 4, 19, 8, 9, 0, 0), f: '8:05 GMT-04:00 \r\n 05/19/2013'}, 38823], 
 
    [ {v: new Date(2013, 4, 23, 2, 4, 0, 0), f: '2:05 GMT-04:00 \r\n 05/23/2013'}, 38345], 
 
    [ {v: new Date(2013, 4, 24, 1, 1, 0, 0), f: '1:05 GMT-04:00 \r\n 05/24/2013'}, 38436], 
 
    [ {v: new Date(2013, 4, 30, 6, 8, 0, 0), f: '6:05 GMT-04:00 \r\n 05/30/2013'}, 38447] 
 
    ]; 
 

 
    var tickMarks = []; 
 
    for (var i = 1; i < data.length; i++) { 
 
    tickMarks.push(data[i][0]); 
 
    i = i + 1; 
 
    } 
 
    tickMarks.push(data[data.length - 1][0]); 
 

 
    var optionsA = { 
 
    hAxis: { 
 
     format: 'H:MM ZZZZ \r\n MM/dd/yyyy', 
 
    }, 
 
    legend: 'none', 
 
    pointSize: 5 
 
    }; 
 

 
    var optionsB = { 
 
    hAxis: { 
 
     ticks: tickMarks 
 
    }, 
 
    legend: 'none', 
 
    pointSize: 5 
 
    }; 
 

 
    var chartA = new google.visualization.LineChart(document.getElementById('chart_divA')); 
 
    chartA.draw(google.visualization.arrayToDataTable(data), optionsA); 
 

 
    var chartB = new google.visualization.LineChart(document.getElementById('chart_divB')); 
 
    chartB.draw(google.visualization.arrayToDataTable(data), optionsB); 
 
}
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_divA"></div> 
 
<div id="chart_divB"></div>

関連する問題