Question

我想绘制一个折线图，其中线条必须是渐变而不是Angular 4中的纯色，使用ng2-charts（一个Angular 4兼容版本的ChartJs）。

我发现在JavaScript中有一种方法可以通过简单地将渐变对象传递给图表的颜色来实现：

let context: CanvasRenderingContext2D = this.canva.nativeElement.getContext('2d');

let grad = context.createLinearGradient(500, 0, 100, 0);

grad.addColorStop(0, '#fff');
grad.addColorStop(1, '#000');

this.testColors = [
    {
        backgroundColor: grad,
        borderColor: grad,
        pointBackgroundColor: grad,
        pointBorderColor: grad,
        pointHoverBackgroundColor: grad,
        pointHoverBorderColor: grad,
    },
];

但事实证明，在Angular 4中（ng2-charts确实只接受这些地方的字符串，并在执行上述操作时出现以下错误：

键入＆＃39; {backgroundColor：CanvasGradient; borderColor：string; pointBackgroundColor：string; pointBorder ...＆＃39;不能分配类型＆＃39; {backgroundColor：string; borderColor：string; pointBackground 颜色：字符串; pointBorderColor：s ...＆＃39;。财产类型＆backgroundColor＆＃39;是不相容的。输入＆＃39; CanvasGradient＆＃39;不能指定为＆＃39; string＆＃39;。

我尝试在字符串中给出CSS线性渐变，如下所示：

            borderColor: 'linear-gradient(135deg, red, red 60%, blue)',

但没有任何效果。

有没有办法实现这个目标？

此外，如果还有其他一些库，我可以使用渐变线而不是纯色线绘制折线图，这也可能有用。

图表js折线图中的Angular 4 Gradient线

0 个答案: