如何解决如何在ChartJS上将甜甜圈颜色更改为线性渐变?
我想将第一个元素的背景更改为这种颜色: 线性梯度(178.18deg,#FD749B -13.56%,#281AC8 158.3%);
var myChart = new Chart(ctx,{
type: "doughnut",data: {
datasets: [
{
data: countArr,backgroundColor: ["#F933FF","#F9A9C6"],borderWidth: 0
}
]
},options: {
cutoutPercentage: 75,tooltips: {
callbacks: {
label: ""
}
}
}
});
我尝试这样做:backgroundColor: ["linear-gradient(178.18deg,#FD749B -13.56%,#281AC8 158.3%)",
不走运。
解决方法
您可以按照以下方式创建渐变:
var gradient = ctx.createLinearGradient(0,450);
gradient.addColorStop(0,'rgba(255,0.5)');
gradient.addColorStop(0.5,0.25)');
gradient.addColorStop(1,0)');
并将gradient
var添加到数据集背景色:
datasets: [
{
label: '# of Votes',data: [12,19,3,5,2,3],backgroundColor: gradient,borderWidth: 1
},]
请检查fiddle
编辑:要使第二个元素成为纯色,只需设置数组:
backgroundColor: [gradient1,'#F933FF'],//1st gradient 2nd '#F933FF'
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。