颜色

当向Chart选项提供颜色时，可以使用多种格式。 您可以将颜色指定为十六进制、RGB或HSL。如果未指定颜色，Chart.js将使用全局默认颜色。 此颜色存储在Chart.defaults.global.defaultColor中。初始值为rgba（0，0，0，0.1）。

您也可以传递CanvasGradient对象。 在传递到图表之前，你需要先创建它以实现一些有趣的效果。

图案和渐变

一个替代选项是传递CanvasPattern或CanvasGradient对象，而不是字符串颜色。

例如，如果要填充图案的数据集，则可以执行以下操作:

  1. var img = new Image();
  2. img.src = 'https://example.com/my_image.png';
  3. img.onload = function() {
  4.     var ctx = document.getElementById('canvas').getContext('2d');
  5.     var fillPattern = ctx.createPattern(img, 'repeat');
  7.     var chart = new Chart(ctx, {
  8.         data: {
  9.             labels: ['Item 1', 'Item 2', 'Item 3'],
  10.             datasets: [{
  11.                 data: [10, 20, 30],
  12.                 backgroundColor: fillPattern
  13.             }]
  14.         }
  15.     })
  16. }

使用图形填充数据可以帮助具有视力缺陷（例如色盲或局部视觉）的观众更容易地了解您的数据。

使用Patternomaly库可以生成填充数据集的模式。

  1. var chartData = {
  2.     datasets: [{
  3.         data: [45, 25, 20, 10],
  4.         backgroundColor: [
  5.             pattern.draw('square', '#ff6384'),
  6.             pattern.draw('circle', '#36a2eb'),
  7.             pattern.draw('diamond', '#cc65fe'),
  8.             pattern.draw('triangle', '#ffce56'),
  9.         ]
  10.     }],
  11.     labels: ['Red', 'Blue', 'Purple', 'Yellow']
  12. };