Chart.js – Styling-Legende

Ich erstelle ein Diagramm mit chart.js und versuche herauszufinden, wie ich das Label/Legenden-Styling ändern kann. Ich möchte den rechteckigen Teil entfernen und stattdessen einen Kreis verwenden. Ich habe gelesen, dass Sie Ihre benutzerdefinierte Legende erstellen können (mit legendCallback), aber für mein Leben kann ich nicht herausfinden, wie das geht. So sieht mein Diagramm jetzt aus – Bild.

Das ist mein HTML:

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

Und das ist mein 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',
            }
        }
}
});

Ich bin im Allgemeinen neu bei JS, also seien Sie bitte so genau wie möglich mit Ihren Antworten. Ich danke dir sehr!

Keine Notwendigkeit zu verwenden legendCallback Funktion. Sie können einstellen usePointStyle = true um dieses Rechteck in einen Kreis zu verwandeln.

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>

für angle4-chart.js könnten Sie das options-Attribut wie folgt verwenden:

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

Schritt 1:
Ändern Sie die Optionen wie folgt:

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

Schritt 2:
Fügen Sie diesen Code an Ihre Leinwand an (direkt nach der Leinwand):

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

Schritt 3:
Generieren Sie diese Legende anstelle der Standardeinstellung damit (direkt nach mychart):

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

Schritt 4:
Machen Sie CSS so, dass es als Kreis generiert wird:

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

Schritt 5:
Ändern Sie css mit dem, was immer Ihrer Meinung nach besser sein sollte.
Jetzt ist Zeit für ein paar Chimichangas.

Verwenden usePointStyle:true

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',
            usePointStyle:true
        }
    }
}

});

Zusätzliche Informationen zur Antwort von @GRUNT Ich weise usePointStyle in legend.labels zu, nicht das, was @GRUNT getan hat Chart.defaults.global.legend.labels.usePointStyle = true;

Dies ist nützlich, wenn Sie React verwenden

legend: {
    labels: {
      usePointStyle: true,
    },
  }

Weitere Informationen hier Zeigen Sie den Punktstil auf der Legende in chart.js an

fügen Sie dies in Ihren Optionen hinzu

 legend: {
display: true,
          position: 'bottom',
          labels: {
boxWidth: 9, 
            fontColor: '#474747',
            fontFamily: '6px Montserrat',
          },
        },

zum Beispiel :

 this.testChart = new Chart('testPie', {
      type: 'doughnut',
      data: {
        labels: [ 'Success','Failure','Aborted'],
        datasets: [
          {
            data: [],
            backgroundColor: [ '#45D78F', '#F58220','#FFD403'],
          },
        ],
      },
      options: {
        maintainAspectRatio: false,
        cutoutPercentage: 50,    // for thikness of doughnut
        title: {
          display: false,
          text: 'Runs',
          fontSize: 14,
          fontFamily: 'Roboto',
          fontColor: '#474747',
        },
        legend: {
          display: true,
          position: 'bottom',
          labels: {
            boxWidth: 9,
            fontColor: '#474747',
            fontFamily: '6px Montserrat',
          },
        },
      },
    });