我如何在chart.js图表中添加线以下的阴影颜色?

Question

这是我当前的折线图代码，它显示了正常的图表，但我想在线下面加颜色阴影。我已经按我想要的方式添加了图像

输入图片描述

var myChart = new Chart("lineChart", {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
backgroundColor: "#F72585",
data: [12, 19, 3, 5, 13, 3],
fill: false,
// borderDash: [],
borderOffset: 0.0,
borderJoinStyle: 'miter',
borderBackgroundColor: '#F72585',
pointBorderColor: '#F72585',
// pointBorderWidth: 1,
pointHoverRadius:5,
pointHoverBackgroundColor: '#F72585',
pointHoverBorderColor: '#F72585',
// pointHoverBorderWidth: 2,
// pointRadius: 1,
// pointHitRadius: 10,
tension: 0,
borderColor: "#F72585",

pointBackgroundColor: "#F72585",
borderWidth: 1
}
]
},
options: {
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Total Price'
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Product Category'
}
}]
},
plugins: {
filler: {
propagate: true
}
},
legend: {
display: false,
},
tooltips: {
callbacks: {
label: function (tooltipItem) {
return tooltipItem.xLabel;
},
title: function(tooltipItem) {
return 'Total Price  '+tooltipItem[0].yLabel;
}
},
position: 'nearest',
intersect: false,
yPadding: 10,
xPadding: 10,
caretSize: 8,
titleFontColor: '#1A202C',
backgroundColor: '#FFFFFF',
bodyFontColor: 'Black',
}
}
});

Answer 1

在highcharts中，可以使用图表类型'area'。检查我在这里更新的stackblitz及其工作

对于Chart JS，你可以设置一个数据集的填充属性为+1，将背景颜色从这一行设置到下一行。

datasets: [{
label: 'India',
data: [],
fill: '+1',
borderColor: '#FFC108',
backgroundColor: 'rgba(255,193,8,0.2)'
},
{
label: 'USA',
data: [],
fill: true,
borderColor: '#FFC108',
backgroundColor: 'rgba(0,0,0,0)'
}]

在chartjs文档中检查JSFiddle