# 颜色

¥Colors

图表支持三种颜色选项：

¥Charts support three color options:

对于几何元素，你可以更改背景和边框颜色；

¥for geometric elements, you can change background and border colors;
对于文本元素，你可以更改字体颜色。

¥for textual elements, you can change the font color.

此外，你还可以更改整个 canvas 背景。

¥Also, you can change the whole canvas background.

# 默认颜色

¥Default colors

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

¥If a color is not specified, a global default color from Chart.defaults is used:

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

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

¥You can reset default colors by updating these properties of Chart.defaults:

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

# 每个数据集的颜色设置

¥Per-dataset color settings

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

¥If your chart has multiple datasets, using default colors would make individual datasets indistinguishable. In that case, you can set backgroundColor and borderColor for each dataset:

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',
    }
  ]
};

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

¥However, setting colors for each dataset might require additional work that you'd rather not do. In that case, consider using the following plugins with pre-defined or generated palettes.

# 默认调色板

¥Default color palette

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

¥If you don't have any preference for colors, you can use the built-in Colors plugin. It will cycle through a palette of seven Chart.js brand colors:

Colors plugin palette

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

¥All you need is to import and register the plugin:

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

注意

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

¥If you are using the UMD version of Chart.js, this plugin will be enabled by default. You can disable it by setting the enabled option to false:

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

# 运行时的动态数据集

¥Dynamic datasets at runtime

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

¥By default, the colors plugin only works when you initialize the chart without any colors for the border or background specified. If you want to force the colors plugin to always color your datasets, for example, when using dynamic datasets at runtime you will need to set the forceOverride option to true:

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

# 高级调色板

¥Advanced color palettes

请参阅很棒的清单 (opens new window) 了解可以让你更灵活地定义调色板的插件。

¥See the awesome list (opens new window) for plugins that would give you more flexibility defining color palettes.

# 颜色格式

¥Color formats

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

¥You can specify the color as a string in either of the following notations:

符号	示例	透明度示例
十六进制 (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) 对象而不是字符串颜色来实现一些有趣的效果。

¥Alternatively, you can pass a CanvasPattern (opens new window) or CanvasGradient (opens new window) object instead of a string color to achieve some interesting effects.

# 图案和渐变

¥Patterns and Gradients

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

¥For example, you can fill a dataset with a pattern from an image.

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)。

¥Pattern fills can help viewers with vision deficiencies (e.g., color-blindness or partial sight) more easily understand your data (opens new window).

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

¥You can use the Patternomaly (opens new window) library to generate patterns to fill datasets:

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']
};