ChartJS Donut Charts Gradient Fill

Question

Così ho provato a fare un riempimento sfumato per il grafico a ciambella ChartJS, ma funziona solo in orizzontale e non in un cerchio.

Questo è il codice che sto usando:

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

E 'possibile implementare il gradiente su un raggio, come visto su questo progetto?

Grazie!

Answer 1

ChartJS non utilizzerà (correttamente) i colori di riempimento sfumato quando si disegna un gradiente lineare su percorsi non lineari come il grafico a ciambella. Un gradiente lineare non curva.

Possibilità # 1 - usare un gradiente radiale

Si potrebbe sperimentare un gradiente radiale e vedere se i risultati soddisfano le vostre esigenze di progettazione.

Possibilità # 2 - usare un tratto sfumato (un progetto fai da te)

Inoltre, la curva di ictus volontà di tela attorno ad un cerchio.

Se si vuole "roll-proprio-" grafico ad anello gradiente, ecco esempio di codice e una demo che utilizza uno strokeStyle pendenza su un percorso circolare (vedi la mia risposta precedente qui: 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>