Comment formater les valeurs de l'échelle de temps de l'axe des abscisses dans le graphique.js v2
je suis capable de formater les tooltips quand je survole un point de données sur un graphique en ligne via options.scales.xAxes.time.tooltipFormat, mais je n'arrive pas à le faire pour l'axe des x tique etiquettes. Mon data.labels est un tableau d'objets de moment. Ils affichent sous la forme "MMM DD, YYYY" (e.g. 23 février 2012), mais je veux laisser tomber l'année.
3 réponses
il suffit de définir toutes les unités de temps sélectionnées displayFormatMMM DD
options: {
scales: {
xAxes: [{
type: 'time',
time: {
displayFormats: {
'millisecond': 'MMM DD',
'second': 'MMM DD',
'minute': 'MMM DD',
'hour': 'MMM DD',
'day': 'MMM DD',
'week': 'MMM DD',
'month': 'MMM DD',
'quarter': 'MMM DD',
'year': 'MMM DD',
}
...
notez que j'ai réglé le format d'affichage de l'unité à MMM DD. Une meilleure façon, si vous avez le contrôle sur l'ensemble de vos données et la taille du graphique, serait la force d'une unité, comme
options: {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'day',
unitStepSize: 1,
displayFormats: {
'day': 'MMM DD'
}
...
Violon - http://jsfiddle.net/prfd1m8q/
selon le graphique de la page de documentation js section de configuration de tick. vous pouvez formater la valeur de chaque tique en utilisant la fonction callback. par exemple, je voulais changer la localisation des dates affichées pour être toujours Allemand. dans le tiques parties de l'axe des options
ticks: {
callback: function(value) {
return new Date(value).toLocaleDateString('de-DE', {month:'short', year:'numeric'});
},
},
Vous pourriez formater les dates avant de les ajouter à votre tableau. C'est la façon dont je l'ai fait. J'ai utilisé AngularJS!--3-->
//convertir la date en format standard
var dt = new Date(date);
/ / prenez seulement la date et le mois et poussez-les à votre tableau d'étiquettes
$rootScope.charts.mainChart.labels.push(dt.getDate() + "-" + (dt.getMonth() + 1));
utilisez ce tableau dans votre présentation graphique