# 颜色

图表支持三种颜色选项

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

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

# 默认颜色

如果未指定颜色，将使用来自Chart.defaults的全局默认颜色

名称	类型	描述	默认值
`backgroundColor`	`颜色`	背景颜色	`rgba(0, 0, 0, 0.1)`
`borderColor`	`颜色`	边框颜色	`rgba(0, 0, 0, 0.1)`
`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 品牌颜色调色板

Colors plugin palette

您只需要导入并注册插件

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

注意

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

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

# 运行时动态数据集

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

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

# 高级颜色调色板

查看awesome 列表 (在新窗口中打开)，了解可让您更灵活地定义颜色调色板的插件。

# 颜色格式

您可以使用以下任一表示法以字符串形式指定颜色

表示法	示例	带有透明度的示例
十六进制 (在新窗口中打开)	`#36A2EB`	`#36A2EB80`
RGB (在新窗口中打开) 或 RGBA (在新窗口中打开)	`rgb(54, 162, 235)`	`rgba(54, 162, 235, 0.5)`
HSL (在新窗口中打开) 或 HSLA (在新窗口中打开)	`hsl(204, 82%, 57%)`	`hsla(204, 82%, 57%, 0.5)`

或者，您可以传递一个CanvasPattern (在新窗口中打开) 或 CanvasGradient (在新窗口中打开) 对象，而不是字符串颜色，以实现一些有趣的效果。

# 图案和渐变

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

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

图案填充可以帮助视觉障碍人士（例如色盲或部分视力）更轻松地理解您的数据 (在新窗口中打开)。

您可以使用Patternomaly (在新窗口中打开) 库来生成填充数据集的图案

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

← 无障碍数据结构 →