我一直在尝试不同的方法

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,
        }]

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const angle = 45 * 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, '#FBCF33');
g1.addColorStop(0.9, '#F53939');
ctx.fillStyle = g1;
ctx.fillRect(0, 0, 400, 400);

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div></div>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="index.js"></script>
</body>
</html>

1条答案

按热度按时间

jfewjypa1#

你把问题归结为Angular 是正确的！你这里的问题是CSS linear-gradient解释“Angular ”的方式。
对于CSS：
渐变线的方向Angular 。值0度相当于到顶部;增加的值从那里顺时针旋转。
Angular 可视化：

但是，在使用Javascript canvas时，原点位于右侧的正x和底部的正y，创建的内容如下所示：

这会导致你的渐变实际上被设置在画布之外的一个位置！考虑到这一点，你可以通过设置与CSS代码相同的色标来匹配渐变，但将Angular 调整为45度。下面是一个工作示例：

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const angle = 45 * 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, '#FBCF33');   
    g1.addColorStop(0.9, '#F53939');
    ctx.fillStyle = g1;
    ctx.fillRect(0, 0, 400, 400);

div{
   width:400px;
   height:400px; 
   background: linear-gradient(135deg, #FBCF33 0%, #F53939 90%);
}

<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    </head>
    <body>
        <div></div>
        <canvas id="canvas" width="400" height="400"></canvas>
        <script src="index.js"></script>
    </body>
</html>

展开查看全部

赞(0）回复(0）举报 2023-02-12

ChartJS 图表Angular 梯度

1条答案

相关问题

热门标签

最新问答