ChartJS Donut Grafikleri Degrade Dolgusu

Question

Bu nedenle ChartJS çörek tablosu için degrade dolgusu yapmaya çalıştım, ancak bu yalnızca bir daire içinde değil yatay olarak çalışıyor. Bu tasarımın görüldüğü gibi

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

o bir yarıçap üzerinde gradyan uygulamak mümkün mü:

Bu kullanıyorum kodudur?

teşekkürler!

Answer 1

ChartJS, donut grafiğiniz gibi doğrusal olmayan yollarda doğrusal bir degrade çizerken degrade dolgulu renkleri kullanmaz. Doğrusal bir eğim eğrilmiyor.

imkanı # 1 - Bir radyal degrade deneme ve sonuçları tasarım gereksinimlerini karşılaması halinde görebileceğiniz bir radyal degrade

kullanın.

imkanı # 2 - gradyanı inme (DIY projesi) da

, bir daire çevresinde tuval inme olacak eğrisi kullanır.

: Burada örnek kod ve dairesel yol üzerindeki bir degrade strokeStyle kullanan Demo var, "roll-your-kendi" için degrade Halka grafik istiyorsanız

(: Angle gradient in canvas burada cevaba bakınız)

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>

Bu geçici çözüm çalışır