Biểu đồ Donut ChartJS Gradient Fill

Question

Vì vậy, tôi đã cố gắng tô màu gradient cho biểu đồ bánh rán ChartJS, nhưng điều này chỉ hoạt động theo chiều ngang chứ không phải trong một vòng tròn.

Đây là mã mà tôi đang sử dụng:

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

Có thể thực hiện gradient trên một bán kính, như thể hiện trên thiết kế này?

Cảm ơn!

Answer 1

Biểu đồJS sẽ không (đúng) sử dụng màu tô dốc khi vẽ một đường thẳng tuyến tính trên các đường phi tuyến tính như biểu đồ bánh rán của bạn. Một gradient tuyến tính không cong.

Khả # 1 - sử dụng một gradient xuyên tâm

Bạn có thể thử nghiệm với một gradient xuyên tâm và xem kết quả đáp ứng nhu cầu thiết kế của bạn.

Khả # 2 - sử dụng một đột quỵ gradient (một dự án DIY)

Ngoài ra, vải của đường cong đột quỵ chí xung quanh một vòng tròn.

Nếu bạn muốn "roll-của riêng bạn-" biểu đồ donut gradient, đây là ví dụ mã và một Demo sử dụng một strokeStyle gradient trên một đường tròn (xem câu trả lời của tôi trước đây: 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>