Vue 应用程序中未出现折线图的 Chartjs 背景颜色

Question

我正在尝试在 Vue 3 应用程序中使用 Chart.js 3.6.0 为折线图渲染背景（渐变，但简单的颜色也不起作用）。用户可以在条形图和折线图之间切换（对于同一数据集）。有趣的是，它适用于条形图：

但折线图没有渐变：

这是数据配置：

data: {
    labels: props.labels as string[],
    datasets: [
        {
            data: props.data as number[],
            backgroundColor: getBackgroundColor(), // returns the gradient
            borderColor: getBorderColor(), // returns a color
            fill: true // tried all possible values for this
        }
    ]
}

我尝试删除所有可能导致问题的内容，但即使是带有硬编码数据的最基本配置也不起作用。

使用 ref 访问画布：

<template>
    <canvas class="statistics-canvas" ref="canvas" width="100%" height="100%"></canvas>
</template>

<script lang="ts">
    // ...
    setup() {
        const canvas = ref(document.createElement("canvas"));
        let chart: Chart;

        onMounted(() => createChart());

        function createChart() {
            chart = new Chart(canvas.value, {/*...*/});
        }

        return {
            canvas
        };
    }
</script>

关于可能导致这种情况的原因有什么想法吗？我也尝试过处理 Chartjs 文档（ https://www.chartjs.org/docs/latest/charts/line.html ）中的配置，但也没有运气。

Answer 1

请检查项目中图表 js 的注册文件。将填充物添加到Chart.register()

import {
  ...,
  Filler,
} from 'chart.js';

Chart.register(
...,
Filler,
);