web-dev-qa-db-fra.com

Chart.js - Légende de style

Je fais un graphique avec chart.js et j'essaie de comprendre comment je peux changer le style de l'étiquette/légende. Je souhaite supprimer la partie rectangle et utiliser à la place un cercle. J'ai lu que vous pouvez créer votre légende personnalisée (en utilisant legendCallback), mais pour la vie de moi, je ne sais pas comment le faire. Voici à quoi ressemble mon graphique maintenant - image .

Voici mon HTML:

<div class="container">
<canvas id="myChart"></canvas>
</div>

Et voici mon JS:

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: 'Link One',
            data: [1, 2, 3, 2, 1, 1.5, 1],
            backgroundColor: [
                '#D3E4F3'
            ],
            borderColor: [
                '#D3E4F3',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        legend: {
            display: true,
          position: 'bottom',
            labels: {
                fontColor: '#333',
            }
        }
}
});

Je suis nouveau sur JS en général, alors soyez aussi précis que possible avec vos réponses. Merci beaucoup!

javascriptjquerychart.js
13
Retros

Pas besoin d'utiliser la fonction legendCallback. Vous pouvez définir usePointStyle = true pour transformer ce rectangle en cercle.

Chart.defaults.global.legend.labels.usePointStyle = true;

var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: 'Link One',
            data: [1, 2, 3, 2, 1, 1.5, 1],
            backgroundColor: [
                '#D3E4F3'
            ],
            borderColor: [
                '#D3E4F3',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        legend: {
            display: true,
            position: 'bottom',
            labels: {
                fontColor: '#333'
            }
        }
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<div class="container">
  <canvas id="myChart"></canvas>
</div>
18
ɢʀᴜɴᴛ

pour angular4-chart.js, vous pouvez utiliser l'attribut options comme ceci:

options = {
      legend:{
        display: true,
        labels: {
          usePointStyle: true,
        }
      }
}
8
Orit

Étape 1:
Modifiez les options en ceci:

options: {
    legend: {
        display: false,
    }
}

Étape 2:
Ajoutez à votre canevas ce code (juste après le canevas):

<div id='chartjsLegend' class='chartjsLegend'></div> //Or prepend to show the legend at top, if you append then it will show to bottom.

Étape 3:
Générez cette légende au lieu de la valeur par défaut avec ceci (juste après mychart):

document.getElementById('chartjsLegend').innerHTML = myChart.generateLegend();

Étape 4:
Créez css pour qu'il génère un cercle:

.chartjsLegend li span {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
    border-radius: 25px;
}

Étape 5:
Changez css avec ce que vous ressentez devrait être meilleur.
Il est temps pour certains chimichangas maintenant.

7
Konstantinos