小编Thi*_*Bèr的帖子

ChartJS Donut Charts Gradient Fill

所以我尝试为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: …
Run Code Online (Sandbox Code Playgroud)

javascript gradient canvas chart.js

7
推荐指数
1
解决办法
5615
查看次数

标签 统计

canvas ×1

chart.js ×1

gradient ×1

javascript ×1