颜色

当向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. };