Chart.js: 将图例颜色更改为数组

Question

我有一个包含三个数据集的图表 (Svelte REPL with code and result)，我想更改每个数据集对应的框的背景颜色，例如：

let legendColors = ['#dddddd', '#aaaaaa', '#777777'];

经过几次尝试，我得到的最接近的结果是更改字体颜色，但甚至不是数组，只有一个。 :(

如何让图例的方框变成我想要的 3 种颜色？

提前感谢您的帮助！

编辑： 我确实在这里找到了一些东西：What happened to generateLegend() in chartjs 3.0?，但这删除了图例的功能（即删除部分数据）。

Answer 1

编辑：下面的另一个答案有运行更容易实现的片段，它也回答了 OP 的要求。我下面的原回答更侧重于完全靠自己打造传奇。

Live Demo。我发现这很有趣...

注意事项：

~~您需要自己构建图例，因为您的颜色与您使用的数据不“相关”（这就是为什么默认情况下它使用来自数据集“a”的颜色）~~（编辑为另一个答案显示这种可能性）
当您使用 Svelte 时，在演示中我使用了 <style> 与 <div> 绑定的图例样式。
对于不使用 Svelte 或在 Chart.js 中寻求解决方案的人，他们应该遵循 Whosebug answer OP 链接中的建议——他们需要 构建图例 在创建 new Chart()

plugins

无论走哪条路，为了保持 OP 提到的图例的功能，我添加了 default behaviour of OnClick 的调整版本。

P.S。对于(3)，我们还要进一步覆盖generateLabels()(here，但可能会导致meta.controllers._resolveAnimation出问题，我们可能还是需要覆盖onClick).

P.P.S。单击图例项时，标签会被划掉（删除线）作为默认行为。那留作进一步的练习或另一个答案。（对于 Svelte，使用布尔标志来更改样式。或者，使用破解）。

Answer 2

您可以通过两种方式实现这一点，使用自定义 generateLabels 函数或在数据集中指定背景颜色。

自定义生成标签：

let legendColors = ['#dddddd', '#aaaaaa'];

const options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderColor: 'pink'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderColor: 'orange'
      }
    ]
  },
  options: {
    plugins: {
      legend: {
        labels: {
          generateLabels: function(chart) {
            const datasets = chart.data.datasets;
            const {
              labels: {
                usePointStyle,
                pointStyle,
                textAlign,
                color
              }
            } = chart.legend.options;

            return chart._getSortedDatasetMetas().map((meta, i) => {
              const style = meta.controller.getStyle(usePointStyle ? 0 : undefined);
              const borderWidth = Chart.helpers.toPadding(style.borderWidth);

              return {
                text: datasets[meta.index].label,
                fillStyle: legendColors[i],
                fontColor: color,
                hidden: !meta.visible,
                lineCap: style.borderCapStyle,
                lineDash: style.borderDash,
                lineDashOffset: style.borderDashOffset,
                lineJoin: style.borderJoinStyle,
                lineWidth: (borderWidth.width + borderWidth.height) / 4,
                strokeStyle: style.borderColor,
                pointStyle: pointStyle || style.pointStyle,
                rotation: style.rotation,
                textAlign: textAlign || style.textAlign,
                borderRadius: 0, // TODO: v4, default to style.borderRadius

                // Below is extra data used for toggling the datasets
                datasetIndex: meta.index
              };
            }, this);
          }
        }
      }
    }
  },
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
</body>

在数据集中添加背景颜色道具：

const options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderColor: 'pink',
        pointBackgroundColor: 'pink',
        backgroundColor: '#dddddd'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderColor: 'orange',
        pointBackgroundColor: 'orange',
        backgroundColor: '#aaaaaa'
      }
    ]
  },
  options: {},
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
</body>

Chart.js: 将图例颜色更改为数组

Chart.js: Change lengend colors to array

javascript

arrays

chart.js

编辑：下面的另一个答案有运行更容易实现的片段，它也回答了 OP 的要求。我下面的原回答更侧重于完全靠自己打造传奇。

Chart.js: 将图例颜色更改为数组

Chart.js: Change lengend colors to array

javascript

arrays

chart.js

编辑：下面的另一个答案有 运行 更容易实现的片段，它也回答了 OP 的要求。我下面的原回答更侧重于完全靠自己打造传奇。

编辑：下面的另一个答案有运行更容易实现的片段，它也回答了 OP 的要求。我下面的原回答更侧重于完全靠自己打造传奇。