Chart.js - 造型图例 [英] Chart.js - Styling Legend

问题描述

我正在使用chart.js创建一个图表，我正在试图弄清楚如何更改标签/图例样式。
我想删除矩形部分，而是使用圆圈。我已经读过你可以制作你的自定义图例（使用legendCallback），但对于我的生活，我无法弄清楚如何做到这一点。这就是我的图表现在的样子 - 图片。

I'm making a chart with chart.js and I'm trying to figure out how I can change the label/legend styling. I want to remove the rectangle part and instead use a circle. I've read that you can make your custom legend (using legendCallback), but for the life of me I cannot figure out how to do it. This is how my chart looks now - image.

这是我的HTML：

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

这是我的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',
            }
        }
}
});

我一般都是JS的新手，所以请尽可能详细地说明你的答案。非常感谢你！

I'm new to JS in general, so please be as specific as possible with your answers. Thank you so much!

推荐答案

无需使用 legendCallback 功能。您可以设置 usePointStyle = true 将该矩形变成圆圈。

No need to use legendCallback function. You can set usePointStyle = true to turn that rectangle into a circle.

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>

这篇关于Chart.js - 造型图例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！