颜色

图表支持三种颜色选项：

• 对于几何元素，您可以更改背景和边框颜色；
• 对于文本元素，您可以更改字体颜色。

此外，您还可以更改整个 帆布背景。

默认颜色

如果未指定颜色，则使用 Chart.defaults 中的全局默认颜色：

名称	类型	描述	默认值
backgroundColor	Color	背景颜色	rgba(0, 0, 0, 0.1)
borderColor	Color	边框颜色	rgba(0, 0, 0, 0.1)
color	Color	字体颜色	#666

您可以通过更新 Chart.defaults 的这些属性来重置默认颜色：

Chart.defaults.backgroundColor = '#9BD0F5';
Chart.defaults.borderColor = '#36A2EB';
Chart.defaults.color = '#000';

每个数据集的颜色设置

如果您的图表有多个数据集，使用默认颜色会使各个数据集无法区分。 在这种情况下，您可以为每个数据集设置 backgroundColor 和 borderColor：

const data = {
  labels: ['A', 'B', 'C'],
  datasets: [
    {
      label: 'Dataset 1',
      data: [1, 2, 3],
      borderColor: '#36A2EB',
      backgroundColor: '#9BD0F5',
    },
    {
      label: 'Dataset 2',
      data: [2, 3, 4],
      borderColor: '#FF6384',
      backgroundColor: '#FFB1C1',
    }
  ]
};

但是，为每个数据集设置颜色可能需要您不希望做的额外工作。 在这种情况下，请考虑将以下插件与预定义或生成的调色板一起使用。

默认调色板

如果您对颜色没有任何偏好，可以使用内置的 Colors 插件。 它将循环显示七种 Chart.js 品牌颜色的调色板：

您只需要导入并注册插件：

import { Colors } from 'chart.js';
Chart.register(Colors);

:::提示 注意

如果您使用的是 UMD 版本的 Chart.js，此插件将默认启用。 您可以通过将 enabled 选项设置为 false 来禁用它：

const options = {
  plugins: {
    colors: {
      enabled: false
    }
  }
};

:::

运行时的动态数据集

默认情况下，颜色插件仅在您初始化图表时没有指定任何边框或背景颜色时才起作用。 如果您想强制颜色插件始终为数据集着色，例如在运行时使用动态数据集时，您需要将 forceOverride 选项设置为 true：

const options = {
  plugins: {
    colors: {
      forceOverride: true
    }
  }
};

高级调色板

请参阅 awesome list (opens new window) 了解可以让您更灵活地定义调色板的插件。

颜色格式

您可以使用以下任一表示法将颜色指定为字符串：

符号	例子	透明度示例
十六进制 (opens new window)	#36A2EB	#36A2EB80
RGB (opens new window) 或 RGBA (opens new window)	rgb(54, 162, 235)	rgba(54, 162, 235, 0.5)
HSL (opens new window) 或 HSLA (opens new window)	hsl(204, 82%, 57%)	hsla(204, 82%, 57%, 0.5)

或者，您可以传递 CanvasPattern (opens new window) 或 CanvasGradient (opens new window) 对象而不是字符串颜色来实现一些有趣的效果。

图案和渐变

例如，您可以使用图像中的模式填充数据集。

const img = new Image();
img.src = 'https://example.com/my_image.png';
img.onload = () => {
  const ctx = document.getElementById('canvas').getContext('2d');
  const fillPattern = ctx.createPattern(img, 'repeat');
  const chart = new Chart(ctx, {
    data: {
      labels: ['Item 1', 'Item 2', 'Item 3'],
      datasets: [{
        data: [10, 20, 30],
        backgroundColor: fillPattern
      }]
    }
  });
};

图案填充可以帮助有视力缺陷（例如，色盲或部分视力）的观众 更容易理解您的数据 (opens new window)。

您可以使用 模式异常 (opens new window) 库生成模式来填充数据集：

const chartData = {
  datasets: [{
    data: [45, 25, 20, 10],
    backgroundColor: [
      pattern.draw('square', '#ff6384'),
      pattern.draw('circle', '#36a2eb'),
      pattern.draw('diamond', '#cc65fe'),
      pattern.draw('triangle', '#ffce56')
    ]
  }],
  labels: ['Red', 'Blue', 'Purple', 'Yellow']
};