更改Chart.js图例中的边框颜色

Question

我想删除或更改图例字段上边框的颜色。

今天有一个灰色边框，但是我不能更改颜色，我希望它像盒子的颜色。

我尝试在图例中添加borderWidth，但没有成功。我设法更改了图表中的边框颜色，但无法在图例中完成。

此我的图表代码：

    var chart = document.getElementById("chart-out-rating");
    var myChart = new Chart(chart, {
      type: 'bar',
      data: {
        labels: datasetPrimeurPrice.year,
        datasets: [{
          label: 'Prix HT',
          data: datasetPrimeurPrice.outingPrice,
          backgroundColor: [
            'rgba(255, 166, 48, 0.3)',
            'rgba(255, 166, 48, 0.3)',
            'rgba(255, 166, 48, 0.3)',
            'rgba(255, 166, 48, 0.3)',
            'rgba(255, 166, 48, 0.3)',
            'rgba(255, 166, 48, 0.3)',
            'rgba(255, 166, 48, 0.3)',
            'rgba(255, 166, 48, 0.3)',
            'rgba(255, 166, 48, 0.3)'
          ],
          borderColor: [
            'rgba(255, 166, 48)',
            'rgba(255, 166, 48)',
            'rgba(255, 166, 48)',
            'rgba(255, 166, 48)',
            'rgba(255, 166, 48)',
            'rgba(255, 166, 48)',
            'rgba(255, 166, 48)',
            'rgba(255, 166, 48)',
            'rgba(255, 166, 48)'
          ],
          borderWidth: 1,
          yAxisID: 'y-axis-1'
        },
        {
          label: 'Note',
          type: 'line',
          data: datasetPrimeurPrice.rating,
          fill: false,
          usePointStyle: true,
          backgroundColor: '#71B37C',
          borderColor: '#71B37C',
          hoverBackgroundColor: '#71B37C',
          hoverBorderColor: '#71B37C',
          yAxisID: 'y-axis-2'
        }
        ]
      },
      options: {
        tooltips: {
          mode: 'label',
          callbacks: {
            label: function (tooltipItems, data) {
              if (tooltipItems.datasetIndex == 0) {
                return data.datasets[tooltipItems.datasetIndex].label + ': ' + tooltipItems.yLabel + ' €';
              } else {
                return data.datasets[tooltipItems.datasetIndex].label + ': ' + tooltipItems.yLabel;
              }
            }
          }
        },
        scales: {
          xAxes: [{
            display: true,
            gridLines: {
              display: false
            },
            labels: {
              show: true
            }
          }],
          yAxes: [{
            type: "linear",
            display: true,
            position: "left",
            id: "y-axis-1",
            gridLines: {
              display: false
            },
            labels: {
              show: true

            },
            ticks: {
              beginAtZero: true,
              callback: function (value, index, values) {
                return value + " €";
              }
            }
          }, {
            type: "linear",
            display: true,
            position: "right",
            id: "y-axis-2",
            gridLines: {
              display: false
            },
            labels: {
              show: true,
              usePointStyle: true
            },
            ticks: {
              min: 75
            }
          }]
        },
        responsive: true,
        maintainAspectRatio: true,
        showLines: false,
        legend: {
          display: true,
          labels: {
            borderWidth: 0
          }
        }
      }
    });

您可以在我的页面上看到结果：Graph with Chart.js

Answer 1

[可行的方法是将边框的颜色设置为透明，或将不透明度设置为0（结果相同）。您现在拥有的是：

borderColor: ['rgba(255, 166, 48)', ...]

我的示例如下所示：

borderColor: ['rgba(255, 255, 255, 0)', ...]

希望这可以帮助您工作；-）