javascript - Chart Js 使用图形线条样式更新图形的图例框

Question

我想用图形线条样式更新图形的图例框。

实际消费平均使用

下面是我的代码，但图例标签图像没有更新。谁能帮帮我？

var ctx = document.getElementById("myChart");
this.myChart = new Chart(ctx,  {
    type: 'line',
    data: {
        labels: ["Jan", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: 'Actual Consumption',
            data:[24, 49, 6, 7, 21, 6],
            backgroundColor: [
                'rgba(225,225,225,0)'  
            ],
            borderColor: [
                'rgba(53,91,183,1)'
            ],
            borderWidth: 2.2,
            pointStyle: 'circle', 
        },{
            label: 'Average Use ',
            data:[4, 12, 2, 17, 22, 2],
            backgroundColor: [
                'rgba(225,225,225,0)'  
            ],
            borderColor: [
                'rgba(230,104,38,1)'

            ],
            borderWidth: 2.2,
            pointStyle: 'rect',

        },{
            label: 'Total Use',
            data:this.data,
            backgroundColor: [
                'rgba(225,225,225,0)'  
            ],
            borderColor: [
                'rgba(148,148,148,1)'
            ] ,
            borderWidth: 2.2,
            pointStyle: 'triangle',

        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        },
        **legend: {
            cursor : "pointer",
            useLineStyle: true,
            labels: {
                fontColor: '#000000'
             }
        }**
    }
});

Answer 1

有一个名为“usePointStyle”的图例选项，它应该使图例样式与图形点的样式相匹配。

legend: {
  labels: {
    usePointStyle: true
  }
}

如果这不能解决您的问题，您可能必须使用“legendCallback”来创建自定义 HTML 图例。