ChartJS圆环图渐变填充

vddsk6oq 于 11个月前发布在 Chart.js

关注(0)|答案(3)|浏览(173)

因此，我尝试为ChartJS甜甜圈图做一个渐变填充，但这只适用于水平方向，而不是圆形。
这是我使用的代码：

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

字符串
有没有可能在半径上实现梯度，就像在这个设计中看到的那样？

的数据
谢谢你，谢谢

chart.js

来源：https://stackoverflow.com/questions/30186461/chartjs-doughnut-charts-gradient-fill

3条答案

按热度按时间

shyt4zoc1#

ChartJS在非线性路径上绘制线性渐变时（如圆环图）不会（正确地）使用渐变填充颜色。线性渐变不会弯曲。

可能性#1 -使用径向梯度

您可以尝试使用径向渐变，看看结果是否满足您的设计需求。

可能性#2 --使用渐变笔划（DIY项目）

此外，画布的中风将曲线周围的一个圆圈。
如果你想“滚动自己的”渐变圆环图，这里有一个示例代码和一个在圆形路径上使用渐变strokeStyle的演示（参见我之前的回答：画布中的Angular 渐变）：
x1c 0d1x的数据

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>

赞(0）回复(0）举报 11个月前

a11xaf1n2#

是的，我这边做的是这样的。
第1步-拿上你的病历。

@ViewChild('slideDoughnutChart') slideDoughnutChart: BaseChartDirective;

字符串
第2步-decompose一个const梯度和分配它。

const gradient = this.slideDoughnutChart.chart.ctx.createLinearGradient(0, 0, 0, 220);

型
第3步-推动的颜色，你想看到的梯度。

const colors = [];
for (let i = 0; i < 4; i++) {
  gradient.addColorStop(0, 'rgb(37, 77, 180)');
  gradient.addColorStop(1, 'rgb(123, 98, 221)');
  colors.push(gradient);
}

型
在这里我推了相同的颜色。
第4步-设置圆环图颜色变量为颜色数组。

this.slideDoughnutChartColors = [{ backgroundColor: colors }];

型
步骤5 -将slideDoughnutChartColors* 变量分配给画布中的颜色绑定。

<canvas class="chartjs canvasResponsive" baseChart #slideDoughnutChart="base-chart" [colors]="slideDoughnutChartColors" ></canvas>

型
如果你按照正确的步骤，你将结束与此.
x1c 0d1x的数据
对于4种不同的颜色，您需要创建4个不同的变量。例如，像这样的东西。

const gradientOne = this.slideDoughnutChart.chart.ctx.createLinearGradient(0, 0, 0, 400);
const gradientTwo = this.slideDoughnutChart.chart.ctx.createLinearGradient(0, 0, 100, 400);
const gradientThree = this.slideDoughnutChart.chart.ctx.createLinearGradient(0, 0, 0, 400);
const gradientFour = this.slideDoughnutChart.chart.ctx.createLinearGradient(0, 0, 0, 400);

型
然后做这样的事

for (let i = 0; i < this.slideDoughnutChartData.length; i++) {
      switch (i) {
        case 0:
          gradientOne.addColorStop(0, 'rgb(223, 43, 100)');
          gradientOne.addColorStop(1, 'rgb(224, 105, 84)');
          colors.push(gradientOne);
          break;
        case 1:
          gradientTwo.addColorStop(0, 'rgb(248, 188, 80)');
          gradientTwo.addColorStop(1, 'rgb(243, 217, 53)');
          colors.push(gradientTwo);
          break;
        case 2:
          gradientThree.addColorStop(0, 'rgb(147, 229, 151)');
          gradientThree.addColorStop(1, 'rgb(3, 220, 179)');
          colors.push(gradientThree);
          break;
        case 3:
          gradientFour.addColorStop(0, 'rgb(123, 98, 221)');
          gradientFour.addColorStop(1, 'rgb(37, 77, 180)');
          colors.push(gradientFour);
          break;
      }
    }

型
会给你带来什么样的下场

的
这是我的图表数据。

this.slideDoughnutChartData = [25, 35, 20, 25, 2];

型

赞(0）回复(0）举报 11个月前

a11xaf1n3#

2023年答案：

我知道这个问题很久以前就被问到了，并且已经得到了回答，但是我认为对于任何寻找更新答案的人来说，知道除了标准的内置线性和径向梯度之外，现在还有第三个-圆锥梯度-这正是我们正在寻找的。
这里是docs的链接。
下面是一个简单的例子，说明它是如何实现的，以实现Chartjs甜甜圈图表的效果：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Doughnut Chart Example</title>
  <!-- Include Chart.js library -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <div style="width: 400px; height: 400px;">
      <canvas id="myDoughnutChart" width="400" height="400"></canvas>
    </div>

  <script>
    // Data for the doughnut chart
    const chartRef = document.getElementById('myDoughnutChart');
    
    let gradient = chartRef.getContext('2d').createConicGradient(0, 200, 200);

    gradient.addColorStop(0, "red");
    gradient.addColorStop(0.25, "orange");
    gradient.addColorStop(0.5, "yellow");
    gradient.addColorStop(0.75, "green");
    gradient.addColorStop(1, "blue");
    
    const data = {
      labels: ['Red-Orange', 'Orange-Yellow', 'Yellow-Green'],
      datasets: [{
        label: 'My Doughnut Chart',
        data: [30, 20, 50],
        backgroundColor: gradient,
        hoverOffset: 4
      }]
    };

    // Configuration for the doughnut chart
    const config = {
      type: 'doughnut',
      data: data,
    };

    // Create the chart
    const myDoughnutChart = new Chart(
      chartRef,
      config
    );
  </script>
</body>
</html>

字符串
上面对图表渐变的实现只是为了显示它的效果。理想情况下，渐变应该分别应用于每一段，但这需要计算每一段的起始Angular 。
希望有帮助！

赞(0）回复(0）举报 11个月前

我来回答

ChartJS圆环图渐变填充

3条答案

相关问题

热门标签

最新问答