# 色彩

圖表支援三個色彩選項

針對幾何元素，您可以變更背景和邊框色彩；
針對文字元素，您可以變更字型色彩。

此外，您還可以變更整個畫布背景。

# 預設色彩

如果未指定色彩，則會使用來自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
    }
  }
};

# 進階調色盤

請參閱超棒清單 (開啟新視窗)，以取得可讓您更彈性定義調色盤的外掛程式。

# 色彩格式

您可以將色彩指定為以下任一表示法的字串

表示法	範例	具有透明度的範例
十六進位 (開啟新視窗)	`#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']
};

← 無障礙功能資料結構 →