Chartjs甜甜圈图与渐变色

Question

我创建了一个甜甜圈图。有没有机会让这种颜色像渐变？我看到this post，我试图在我自己的图表上实现，但我不能。

任何帮助，我将不胜感激。

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 
     } 
    } 
} 
});