折线图的 Chartjs backgroundColor 未出现在 Vue 应用程序中

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:

访问 canvas

<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 的注册器文件。添加 Filler 到 Chart.register()

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

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

折线图的 Chartjs backgroundColor 未出现在 Vue 应用程序中

Chartjs backgroundColor for line chart does not appear in Vue app

javascript

typescript

vue.js

chart.js

vuejs3