Chart.js 颜色

为图表选项提供颜色时，我们可以使用多种格式。 我们可以将颜色指定为十六进制、RGB 或 HSL 表示法的字符串。 如果需要颜色但未指定，Chart.js 将使用全局默认颜色。 有 3 个颜色选项，存储在 Chart.defaults 中，可以设置：

我们还可以传递一个 CanvasGradient 对象。 需要在传递给图表之前创建它，但使用它可以实现一些有趣的效果。

模式 和 渐变

另一种选择是传递 CanvasPattern 或 CanvasGradient 对象而不是字符串颜色。

例如，如果想用图像中的模式填充数据集，我们可以执行以下操作。

const img = new Image();
img.src = 'https://example.com/my_image.png';
img.onload = function() {
    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']
};