Chartjs 带有渐变颜色的甜甜圈图

Posted 2023-03-25

【中文标题】Chartjs 带有渐变颜色的甜甜圈图

【英文标题】：Chartjs doughnut chart with gradient color

【发布时间】：2017-12-29 01:51:52

【问题描述】：

我创建了一个圆环图。有没有机会使这种颜色像渐变？我看到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>

【参考方案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
        
    

);

【讨论】：

这个渐变实际上并没有跟随饼图，不是吗？