圖例的 ChartJS 不同邊框顏色

Question

我需要為圖例設置與實際圖表不同的邊框顏色； 每當我向圖表數據添加邊框顏色時，它都會應用於圖例和圖表。 而且我在文檔中找不到為圖例設置不同邊框 colors 的任何選項

這是我想要實現的屏幕截圖，有什么想法嗎？：

Answer 1

我發現執行此操作以及對圖例進行一些其他自定義的唯一方法是實現 圖例項界面。

這里接受的答案結合圖例項界面應該是一個好的開始。

這是我根據該答案制作的jsfiddle ，但針對 chartjs 3.7.1 進行了更新。 要關注的主要部分是：

options: {
plugins: {
  legend: {
    labels: {
      usePointStyle: true,

      generateLabels: function(chart) {
        var data = chart.data;
        if (data.labels.length && data.datasets.length) {
          return data.labels.map(function(label, i) {
          
            var meta = chart.getDatasetMeta(0);
            var ds = data.datasets[0];
            return {
              text: label,
              fillStyle: ds.backgroundColor[i],
              strokeStyle: ds.legendOutline[i],
              lineWidth: ds.borderWidth,
              hidden: isNaN(ds.data[i]) || meta.data[i].hidden,
              index: i
            };
          });
        } else {
          return [];
        }
      }
    }
  }
}

strokeStyle 是輪廓屬性，我在數據集中創建了一個名為 legendOutline 的字段。 legendOutline 和數據集中的數據都用 i 引用，所以 legendOutline[i] 指向代表 data[i] 的 label