ChartJS甜甜圈图渐变填充 [英] ChartJS Doughnut Charts Gradient Fill

问题描述

因此，我尝试为ChartJS甜甜圈图进行渐变填充，但这仅适用于水平而不是圆形。

So I tried to make a gradient fill for the ChartJS doughnut chart, but this only works horizontal and not in a circle.

这是我的代码m使用：

   var ctx = document.getElementById("chart-area").getContext("2d");

   var gradient1 = ctx.createLinearGradient(0, 0, 0, 175);
   gradient1.addColorStop(0.0, '#ACE1DB');
   gradient1.addColorStop(1.0, '#7FBDB9');


   var gradient2 = ctx.createLinearGradient(0, 0, 400, 400);
   gradient2.addColorStop(0, '#B5D57B');
   gradient2.addColorStop(1, '#98AF6E');

   var gradient3 = ctx.createLinearGradient(0, 0, 0, 175);
   gradient3.addColorStop(0, '#E36392');
   gradient3.addColorStop(1, '#FE92BD');

   var gradient4 = ctx.createLinearGradient(0, 0, 0, 175);
   gradient4.addColorStop(1, '#FAD35E');
   gradient4.addColorStop(0, '#F4AD4F');

   /* ADD DATA TO THE DOUGHNUT CHART */
   var doughnutData = [
    {
      value: 80,
      color: gradient1,
      highlight: "#E6E6E6",
      label: "NUTRIENTS"
    },
    {
      value: 20,
      color:"#E6F1EE"

    },
    {
      value:50,
      color: gradient2,
      highlight: "#E6E6E6",
      label: "PROTEINE"
    },
    {
      value: 50,
      color:"#E6F1EE"
    },
    {
      value: 75,
      color: gradient3,
      highlight: "#E6E6E6",
      label: "FETTE"
    },
    {
      value:25,
      color:"#E6F1EE"
    },
    {
      value: 77,
      color: gradient4,
      highlight: "#E6E6E6",
      label: "CARBS"
    }
    {
      value: 23,
      color:"#E6F1EE"
    },
   ];

是否可以在此设计中实现半径上的渐变？

Is it possible to implement the gradient on a radius, as seen on this design?

谢谢！

推荐答案

ChartJS不会（正确）在非线性路径（例如甜甜圈图）上绘制线性渐变时，请使用渐变填充颜色。线性渐变不会弯曲。

ChartJS will not (properly) use gradient fill colors when drawing a linear gradient on non-linear paths like your donut chart. A linear gradient does not curve.

可能性＃1-使用径向渐变

您可能会尝试径向渐变并查看结果是否满足您的设计需求。

You might experiment with a radial gradient and see if the results meets your design needs.

第二种可能性-使用渐变笔画（DIY项目）

此外，画布的笔触也会绕一个圆弯曲。

Also, canvas's stroke will curve around a circle.

如果您想自己动手渐变甜甜圈图，这是示例代码，以及在圆形路径上使用渐变strokeStyle的演示（请在此处查看我以前的回答：画布中的角度渐变）：

If you want to "roll-your-own" gradient donut chart, here's example code and a Demo that uses a gradient strokeStyle on a circular path (see my previous answer here: Angle gradient in canvas):

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

function drawMultiRadiantCircle(xc, yc, r, radientColors) {
  var partLength = (2 * Math.PI) / radientColors.length;
  var start = 0;
  var gradient = null;
  var startColor = null,
      endColor = null;

  for (var i = 0; i < radientColors.length; i++) {
    startColor = radientColors[i];
    endColor = radientColors[(i + 1) % radientColors.length];

    // x start / end of the next arc to draw
    var xStart = xc + Math.cos(start) * r;
    var xEnd = xc + Math.cos(start + partLength) * r;
    // y start / end of the next arc to draw
    var yStart = yc + Math.sin(start) * r;
    var yEnd = yc + Math.sin(start + partLength) * r;

    ctx.beginPath();

    gradient = ctx.createLinearGradient(xStart, yStart, xEnd, yEnd);
    gradient.addColorStop(0, startColor);
    gradient.addColorStop(1.0, endColor);

    ctx.strokeStyle = gradient;
    ctx.arc(xc, yc, r, start, start + partLength);
    ctx.lineWidth = 30;
    ctx.stroke();
    ctx.closePath();

    start += partLength;
  }
}

var someColors = [];
someColors.push('#0F0');
someColors.push('#0FF');
someColors.push('#F00');
someColors.push('#FF0');
someColors.push('#F0F');

drawMultiRadiantCircle(150, 150, 120, someColors);

body{ background-color: ivory; }
#canvas{border:1px solid red;}

<canvas id="canvas" width=300 height=300></canvas>

这篇关于ChartJS甜甜圈图渐变填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！