web-dev-qa-db-fra.com

ChartJS - Dessine un tableau avec une étiquette par mois, des données par jour

Je voudrais dessiner un graphique en courbes par Chartjs avec des données par jour, mais étiquette par mois.

Si l'étiquette est affichée par jour, il y a beaucoup de points. Donc, j'aimerais afficher les étiquettes par mois plutôt que par jour. Par exemple:

enter image description here

Quelqu'un pourrait m'apprendre comment faire ça?

Je vous remercie.

javascriptchart.js
16
user4557573

Configurez simplement votre propriété xAxes-> time comme suit:
unité: 'mois'

xAxes: [{
  type: 'time',
  position: 'bottom',
  time: {
    displayFormats: {'day': 'MM/YY'},
    tooltipFormat: 'DD/MM/YY',
    unit: 'month',
   }
}],
3
David Merino

Cette question est assez ancienne maintenant, mais j'ai trouvé une solution de contournement utilisant la fonctionnalité afterTickToLabelConversion. J'ai formaté la date et n'ai laissé qu'une étiquette par mois (le reste des étiquettes est transformé en guillemets vides).
Voici l'extrait à mettre dans votre option graphique:

scales: {
        xAxes: [{
            type: 'time',
            position: 'bottom',
            time: {
                displayFormats: {
                    'day': 'MM/YY'
                },
                tooltipFormat: 'DD/MM/YY',
                unit: 'day',
            },
            // leave only one label per month
            afterTickToLabelConversion: function (data) {
                var xLabels = data.ticks;
                var oldLabel = "";
                xLabels.forEach(function (labels, i) {
                    if(xLabels[i] == oldLabel){
                        xLabels[i] = "";
                    } else {
                        oldLabel = xLabels[i];
                    }
                });
            }
        }]
    }
0
eflamm

Le tableau labels et le tableau data doivent correspondre. Par conséquent, vous devez calculer vos valeurs afin qu'elles soient conservées dans un tableau de données afin de correspondre à vos étiquettes

data: {
    labels: ["Jan", "Feb", "March", ...],
    datasets: [{
        label: '# of Votes',
        data: [01, 02, 03, ...],
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            ...
        ],
        borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            ...
        ],
        borderWidth: 1
    }]
},

Est-ce que cela résout votre doute?

0
emersonmdca