Chartjs圓環圖表與漸變顏色

Question

我創建了一個圓環圖。 有沒有機會像漸變這樣的顏色？ 我看到這篇文章 ，我試圖在我自己的圖表上實現，但我不能。

任何幫助，我將不勝感激。

 var ctx = $('#teamDoughnutChart'); var doughnutBar = new Chart(ctx, { type: 'doughnut', data: { labels: ["A", "B", "C", "D", "E"], datasets: [{ label: "Status", backgroundColor: [ 'rgba(192, 57, 43,1)', 'rgba(244, 187, 18, 1)', 'rgba(41, 128, 185,1)', 'rgba(39, 174, 96,1)', 'rgba(191, 199, 215, 1)' ], borderColor: 'rgba(73, 79, 92, 0)', data: [24, 38, 96, 79, 41] }] }, options: { cutoutPercentage: 70, maintainAspectRatio: false, startAngle: 0, tooltips: { mode: 'index', backgroundColor: '#393e48' }, legend: { position: 'bottom', labels: { fontSize: 12, padding: 25, boxWidth: 15 } } } }); 

 <canvas id="teamDoughnutChart"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 1

我有同樣的問題。 我找到了解決方案 試試這個

var canvas = $('#teamDoughnutChart');
var ctx = canvas.getContext('2d');
var gradientColors = [
{
  start: '#f3bb98',
  end: '#ea8ba9'
},
{
  start: '#F6A064',
  end: '#ED5384'
}
];

var gradients = [];

gradientColors.forEach( function( item ){
    var gradient = ctx.createLinearGradient(0, 0, 150 , 150);
    gradient.addColorStop(0, item.start);
    gradient.addColorStop(1, item.end);
    gradients.push(gradient);
});


var doughnutBar = new Chart(canvas, {

type: 'doughnut',
data: {
    labels: ["A", "B"],
    datasets: [{
        label: "Status",
        backgroundColor: gradients,
        borderColor: 'rgba(73, 79, 92, 0)',
        data: [24, 38]
    }]
},
options: {
    cutoutPercentage: 70,
    maintainAspectRatio: false,
    startAngle: 0,
    tooltips: {
        mode: 'index',
        backgroundColor: '#393e48'
    },
    legend: {
        position: 'bottom',
        labels: {
            fontSize: 12,
            padding: 25,
            boxWidth: 15
        }
    }
}
});