在chartJs中折线图下方区域的背景颜色?

Question

我正在使用chart js创建一个图表来呈现一些数据。

const data = {
labels: ["1 Dec", "8 Dec", "16 Dec", "31 Dec"],
datasets: [
{
label: "Sales Made",
data: [3, 7, 4, 5],
borderColor: ["#03A9F5"],
},
],
};
const options = {
tension: 0.4,
title: {
display: true,
text: "linechrt",
},
scales: {
y: [
{
display: true,
stacked: true,
ticks: {
beginAtZero: true,
steps: 10,
stepValue: 5,
min: 0,
max: 100,
},
},
],
},
};

现在我已经看了在线教程，甚至文档，但我还没有得到一个明确的答案如何绘制线以下的区域。ChartJs有很多版本，以前对这个问题的回答，尤其是在Stack上，似乎不起作用。

对于其他图表，如条形图，代码

backGroundColor: ["red"]

在数据集对象上工作得很好，但如果我试图对折线图做同样的事情，它就不会了。顶部单击用于隐藏或显示图表的标签图标似乎是唯一响应背景颜色更改的图标。这条线下面的区域没有。请帮。

<Line data={data} options={options} />

Answer 1

您需要将数据集中的fill设置为true。如果你正在使用treeshaking，你还需要从chart.js中导入和注册filler。

const data = {
labels: ["1 Dec", "8 Dec", "16 Dec", "31 Dec"],
datasets: [
{
label: "Sales Made",
data: [3, 7, 4, 5],
borderColor: ["#03A9F5"],
fill: true,
backgroundColor: 'pink'
},
],
};