Chart.js - 造型图例

Question

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

这是我的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的新手,所以请尽可能详细地说明你的答案.非常感谢!

Answer 1

无需使用legendCallback功能.您可以设置 usePointStyle = true将该矩形转换为圆形.

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>

Answer 2

对于angular4-chart.js，您可以使用options属性，如下所示：

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

Answer 3

步骤1：将
选项更改为此：

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

步骤2：
将此代码附加到画布上（紧随画布之后）：

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

步骤3：
生成此图例，而不是使用它生成默认图例（在mychart之后）：

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

步骤4：
制作CSS，使其生成为圆形：

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

第5步：
根据您的喜好更改CSS。
现在是时候进行一些chimichangas了。

Answer 4

使用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
        }
    }
}

});