4
votes

Graphique Js, stylisez différemment certaines graduations sur l'axe

J'ai un graphique à barres où sur l'axe des x nous avons des dates. Je veux rendre les jours de week-end audacieux ou leur donner une couleur différente.

window.myBar = new Chart(ctx, {
            type: 'bar',
            data: barChartData,
            options: {
                title: {
                    display: false,
                },
                tooltips: {
                    mode: 'index',
                    intersect: false
                },
                legend: {
                    display: true,
                    position: "top"
                },
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    xAxes: [{
                        stacked: true,
                        ticks: {
                            fontColor:'#CCCCCC',
                            callback: function(value, index, values) {
                                if (value.substring(0, 3) == 'Sat' || value.substring(0, 3) == 'Sun') {
                                    return value.toUpperCase();
                                } else {
                                    return  value;
                                }
                            },
                        }
                    }],
                    yAxes: [{
                        stacked: true,
                    }]
                }
            }
        });

J'ai également examiné la configuration des graduations mineures et des graduations majeures, mais je ne sais pas si c'est ce que je dois examiner et comment l'implémenter.

chart.js

5 commentaires

postez votre code html

Avez-vous déjà trouvé une solution à cela? J'ai le même problème.

Non, je n'ai pas ...

Je suppose toujours pas de solution? Le rappel de tick ne peut être utilisé que pour remplacer la valeur elle-même mais pas son style.

En effet, pas de solution ...

3 Réponses :

0
votes

Utilisez ticks dans xAxes.

xAxes: [{
            ticks: {
            fontStyle: "bold"
            }
            }]

2 commentaires

Salut Aaron, le problème est que je ne veux que quelques coches en gras

Oh mon mal. Désolé. vous fera savoir si j'obtiens la solution.

0
votes

Moi aussi, j'ai rencontré ce problème et si le gras est tout ce que vous voulez, ma solution était d'utiliser un générateur de polices fantaisie et utilisez le texte 𝘀𝗮𝗻-𝘀𝗲𝗿𝗶𝗳 𝗯𝗼𝗹𝗱 généré comme attributs d'étiquette. Qu'est-ce qui fonctionne, non?

1 commentaires

lien seulement les réponses deviennent inutiles si le lien se rompt

1
votes

Vous pouvez définir le style de vos ticks de week-end via le ticks.major configuration comme suit.

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.0/Chart.bundle.min.js"></script>
<canvas id="myChart" height="100"></canvas>

De plus, vous devez marquer les graduations souhaitées comme majeur via afterBuildTicks callback.

const dates = [];
let day = new Date('2020-01-01');
for (let i = 0; i < 20; i++) {
    dates.push(new Date(day.getFullYear(), day.getMonth(), day.getDate()));
    day.setDate(day.getDate() + 1);
};

function generateData() {
  return dates.map(d => ({ x: d, y: Math.floor(Math.random() * 10) + 1 }));
};

new Chart('myChart', {
  type: 'bar',
  data: {
    datasets: [{
        label: 'Dataset 1',
        data: generateData(),
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderColor: 'rgb(255, 99, 132)',
        borderWidth: 1
      },
      {
        label: 'Dataset 2',
        data: generateData(),
        backgroundColor: 'rgba(255, 159, 64, 0.2)',
        borderColor: 'rgb(255, 159, 64)',
        borderWidth: 1
      },
      {
        label: 'Dataset 3',
        data: generateData(),
        backgroundColor: 'rgba(54, 162, 235, 0.2)',
        borderColor: 'rgb(54, 162, 235)',
        borderWidth: 1
      }
    ]
  },
  options: {
    scales: {
      xAxes: [{
        offset: true,
        stacked: true,
        type: 'time',
        time: {
          unit: 'day',
          displayFormats: {
            day: 'ddd D MMM YYYY',
            month: 'ddd D MMM YYYY'            
          },
          tooltipFormat: 'ddd D MMM YYYY'
        },
        ticks: {  
          major: {      
            enabled: true,
            fontStyle: 'bold',
            fontColor: 'rgb(54, 143, 3)'
          }
        },
        afterBuildTicks: (scale, ticks) => {
          ticks.forEach(t => {
            const day = new Date(t.value).getDay();
            t.major = (day == 0 || day == 6);
          });
          return ticks;
        }
      }],
      yAxes: [{
        stacked: true,
        ticks: {      
          beginAtZero: true
        }
      }]
    }
  }
});

Veuillez jeter un œil à l'extrait de code exécutable ci-dessous.

afterBuildTicks: (scale, ticks) => {
  ticks.forEach(t => {
    const day = new Date(t.value).getDay();
    t.major = (day == 0 || day == 6);
  });
  return ticks;
}

ticks: {
  major: {
     enabled: true,
     fontStyle: 'bold',
     fontColor: 'rgb(54, 143, 3)'
  }
},

0 commentaires