Escape "GMT" für Google Charts Timestamp

Question

Ich habe Google Charts mit den hAxis als Zeitleiste eingerichtet. Mein Kunde möchte die Zeit in 24-Stunden-Zeit anzeigen, wobei der GMT-Offset entlang der Seite und das Datum gedruckt wird. Mein Code ist ziemlich einfach, aber das "GMT" -Label erzeugt einen interessanten Nebeneffekt.

Hier ist mein Format-Code: "format": 'H:MM '+' GMT'+$scope.offset.toString()+'\r\n MM/dd/yyyy' aber das Ergebnis ist:

6:03 AD3T+7 
03/21/2016 

AD3T von "GMT", die wahrscheinlich das Ergebnis G vorbei (? AD zu bekommen) und M den Monat (3 zu erhalten), und das T hat anscheinend keine Wirkung.

Meine Frage ist, in dem Google Charts JSON-Objekt, wie kann ich den Zeitstempel formatieren, um eine lesbare Beschriftung von "GMT" und dem Offset zu haben? Muss ich "GMT" entkommen? Wenn das so ist, wie?

Answer 1

Es gibt ein paar verschiedene Möglichkeiten, die Formatierung anwenden, am einfachsten zu sein hAxis.format
es folgt der ICU pattern set
Siehe Tabelle unter Ausführliche Beschreibung für alle Muster zur Verfügung.

Ich denke, das kann Ihnen nahe kommen, einschließlich der Offset.
'H:MM ZZZZ \r\n MM/dd/yyyy'

Sie können auch Ihre eigenen Häkchen angeben.
Dies bedeutet, dass Sie Ihr eigenes benutzerdefiniertes Format anwenden können, das in JavaScript generiert wurde.
Im folgenden Beispiel wird davon ausgegangen, dass diese Formatierung bereits erfolgt ist.

Geben Sie das typische Objekt Google für eine Spalte Wert in einem Array angezeigt müssen
Sie
ein für jedes Häkchen akzeptiert {v: new Date(2013, 4, 5, 3, 6, 0, 0), f: '3:05 GMT-04:00 \r\n 05/05/2013'}

Im Folgenden sind zwei Beispiele, ein mit hAxis.format, die anderen 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>