如何在线图上添加填充？

Question

通常我应该能够通过将属性添加到数据集来添加填充。但我无法让它工作，我也无法找到任何类似的信息。也许缺少插件？

const chartData = {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [{
                radius: 0,
                borderColor: 'rgb(75, 192, 192)',
                backgroundColor: 'rgb(75, 192, 192)',
                tension: 0.1,
                hoverOffset: 4,
                data: [65, 59, 80, 81, 56, 55, 40],
                fill: true
            }]
        }

我的 CartJS 注册如下所示：

import {
    Chart as ChartJS,
    Title,
    Tooltip,
    LineElement,
    LinearScale,
    PointElement,
    CategoryScale,
    Plugin
} from 'chart.js'
import { useConstructionRiskStore } from '../../core/stores/constructionRiskStore'

ChartJS.register(
    Title,
    Tooltip,
    LineElement,
    LinearScale,
    PointElement,
    CategoryScale
)

它可能只是一些愚蠢的东西......我知道。

Answer 1

您必须导入并注册 Filler 插件才能在使用 treeshaking 时使用填充：

import {Chart, Filler} from 'chart.js'
Chart.register(Filler)

如何在线图上添加填充？

how to add fill on line diagram?

chart.js

vue-chartjs