我一直在尝试不同的方法
linear-gradient(135deg, #FBCF33 0%, #F53939 90%);
在我的条形图。我接近所需的梯度。但是,未能实现完全相同的一个在CSS。
据我所知,这是由于Angular 。如何实现同样的createLinearGradient
下面是我的尝试。
const angle = 136 * Math.PI / 180;
var x2 = 400 * Math.cos(angle); // angle in radians
var y2 = 400 * Math.sin(angle); // angle in radians
var g1 = ctx.createLinearGradient(0, 0, x2, y2);
g1.addColorStop(0, '#EDDE5D');
g1.addColorStop(0.5, '#F09819');
有人能分享一下对此的看法吗?
- 编辑:**
带颜色的数据集
const equipment = [100, 0, 20, 10, 60, 20, 0, 0, 20];
function bgColor(context, c1, c2) {
const {chart, datasetIndex, index} = context;
const ds = chart.data.datasets[datasetIndex];
const value = ds.data[index];
const y = chart.scales.y.getPixelForValue(value);
const meta = chart.getDatasetMeta(datasetIndex);
const data = meta.data[index];
const {x, width, base} = data;
if (x) {
const ctx = chart.ctx;
const gradient = ctx.createLinearGradient(x, y, x + width, base);
gradient.addColorStop(0, c1);
gradient.addColorStop(0.9, c2);
return gradient;
}
}
datasets: [
{
label: 'Equipment',
data: equipment,
backgroundColor(context) {
return bgColor(context, '#EDDE5D', '#F09819');
},
tension: 0.4,
fill: false,
borderWidth: 0,
hoverBorderColor: "#000",
hoverBackgroundColor: '#FBCF33',
hoverBorderWidth: 1,
}]
1条答案
按热度按时间jfewjypa1#
你把问题归结为Angular 是正确的!你这里的问题是CSS
linear-gradient
解释“Angular ”的方式。对于CSS:
渐变线的方向Angular 。值0度相当于到顶部;增加的值从那里顺时针旋转。
Angular 可视化:
但是,在使用Javascript canvas时,原点位于右侧的正x和底部的正y,创建的内容如下所示:
这会导致你的渐变实际上被设置在画布之外的一个位置!考虑到这一点,你可以通过设置与CSS代码相同的色标来匹配渐变,但将Angular 调整为45度。下面是一个工作示例: