chart.js - 更改 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)', ...]

希望这对您有所帮助并且有效;-)