Javascript 让图表中的折线图*向上*至1，在*图表线下*填充bkg时遇到问题

我正在chart.js中创建一个折线图，以显示从高到低的上升（希望如此）。想一想“你完成了什么地方”，“什么搜索排名”等逻辑，其中#1是最好的

我读了，不知道怎么做。我尝试了两种方法：

• 将数字设为负数（使其上升）
• 在选项中添加

  reverse:true

  标记

这两种解决方案都使图表的线条朝着正确的方向发展，但是，填充的部分是错误的区域。它在线条上方的区域中着色，而不是在线条下方

我正在使用Chart.jsv。2.7.2

这是我运行它的脚本

var ctx=document.getElementById（'all-canvas'）.getContext（“2d”）；
var gradientStroke=ctx.createLinearGradient（500,0,100,0）；
gradientStroke.addColorStop（0，#ca38d4'）；
gradientStroke.addColorStop（1，#d43842'）；
var myChart=新图表（ctx{
“类型”：“行”，
“数据”：{
“标签”：[“九月”、“十月”、“十一月”、“十二月”、“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
“数据集”：[{
“数据”：[75.833333,75.833333,75.833333,75.833333,75.833333,75.833333,75.833333,75.833333,75.833333,75.833333,75.833333,75.833333,78.833333,70,72.333333]，
“填充”：正确，
背景颜色：gradientStroke，
边框颜色：gradientStroke，
“spanGaps”：错误，
半径：0
}]
},
“选择”：{
“传奇”：{
“显示”：错误
},
比例：{
雅克斯：[{
滴答声：{
fontColor:“透明”，
填充：20，
贝吉纳泽罗：是的，
相反：正确
},
网格线：{
drawTicks:false，
显示：假
}
}],
xAxes：[{
网格线：{
drawTicks:false，
显示：假
},
滴答声：{
填充：20，
fontColor：“透明”
}
}]
}
},
“填充”：真
});
文档不明显，在“面积图”下，但您可以

我发现更容易查看清楚显示每个选项的功能的列表

在数据集中设置
fill:“开始”
会反转图表中的效果：


var ctx=document.getElementById（'all-canvas'）.getContext（“2d”）；
var gradientStroke=ctx.createLinearGradient（500,0,100,0）；
gradientStroke.addColorStop（0，#ca38d4'）；
gradientStroke.addColorStop（1，#d43842'）；
var myChart=新图表（ctx{
“类型”：“行”，
“数据”：{
“标签”：[“九月”、“十月”、“十一月”、“十二月”、“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
“数据集”：[{
“数据”：[75.833333,75.833333,75.833333,75.833333,75.833333,75.833333,75.833333,75.833333,75.833333,75.833333,75.833333,75.833333,78.833333,70,72.333333]，
“填充”：“开始”，
背景颜色：gradientStroke，
边框颜色：gradientStroke，
“spanGaps”：错误，
半径：0
}]
},
“选择”：{
“传奇”：{
“显示”：错误
},
比例：{
雅克斯：[{
滴答声：{
fontColor:“透明”，
填充：20，
贝吉纳泽罗：是的，
相反：正确
},
网格线：{
drawTicks:false，
显示：假
}
}],
xAxes：[{
网格线：{
drawTicks:false，
显示：假
},
滴答声：{
填充：20，
fontColor：“透明”
}
}]
}
}
});
工作正常！谢谢你的全面回复。