如何解决如何根据yAxis值设置chartJs背景色的特定高度
我有一个使用chartJs
see app.component.ts on Stackblitz
您可以看到backgroundColor: 'rgba(250,174,50,1)'
仅给出整个图表的颜色。我需要的是背景颜色,直到特定的yAxis
值为止。在此示例中,例如直到200,我想看到橙色并休息像下面一样是白色。
有什么办法吗?
解决方法
Plugin Core API提供了一系列可用于执行自定义代码的挂钩。您可以使用afterLayout
钩子通过CanvasRenderingContext2D.createLinearGradient()
创建线性渐变,并将其分配给数据集的backgroundColor
属性。
plugins: [{
afterLayout: c => {
let dataset = c.data.datasets[0];
let thresholdValueIndex = dataset.data.indexOf(dataset.fillThreshold);
let xAxis = c.scales["x-axis-0"];
let xRight = xAxis.getPixelForTick(thresholdValueIndex);
let gradientFill = c.ctx.createLinearGradient(xAxis.left,xRight,0);
gradientFill.addColorStop(0,"rgb(250,174,50");
gradientFill.addColorStop(1,"white");
dataset.backgroundColor = gradientFill;
}
}],
此代码期望在数据集上定义属性fillThreshold
,其值必须对应于data
数组中也包含的值。
请查看您修改过的StackBlitz。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。