ChartJs - 具有多个数据集的圆环图上的圆形边框

Posted 2023-03-25

【中文标题】ChartJs - 具有多个数据集的圆环图上的圆形边框

【英文标题】：ChartJs - Round borders on a doughnut chart with multiple datasets

【发布时间】：2018-01-08 19:29:48

【问题描述】：

我有一个包含多个数据集的常规 Chartjs 甜甜圈图，对数据集使用以下代码：

datasets: 
    [
        
            label: 'Bugs',
            data: [ 60 , 6.6666666666667 , 33.333333333333 ],
            backgroundColor: ['#25CFE4', '#92E7F1', '#eeeeee'],
        , 
            label: 'Fixes',
            data: [ 60 , 0.44444444444444 , 39.555555555556 ],
            backgroundColor: ['#514463', '#8C75AB', '#eeeeee'],
        , 
            label: 'Redesigns',
            data: [
            33.333333333333 , 10.37037037037 , 56.296296296296 ],
            backgroundColor: ['#1B745F', '#40C1A0', '#eeeeee'],
        
    ]
;

我正在尝试在秤上实现圆形边缘，我设法完成了第一轮，但其他人没有运气。

基本上，这就是我现在所拥有的

这就是我想要实现的目标（对于可怜的 Photoshop 感到抱歉）

我不介意刻度的起点是否也是圆形的，或者灰色区域（我将其涂成灰色只是为了给人一种尚未填充的印象）气体的边缘也是圆形的。

谢谢

【问题讨论】：

你可能需要做这样的事情。 ***.com/questions/31582555/…

或者更好：***.com/questions/36934967/…

你可以使用pluginService来做这个。试试这个....***.com/questions/37384092/…

我之前试过你的两个cmets。两者都只制作最外层的圆形，并且只制作最大的条:(

@fsenna 你有没有发现什么有用的东西。我面临同样的问题，只有外部正在修复。

【参考方案1】：

又做了一些调整，终于搞定了。这正是你想要的：

    Chart.pluginService.register(
        afterUpdate: function (chart) 
                var a=chart.config.data.datasets.length -1;
                for (let i in chart.config.data.datasets) 
                    for(var j = chart.config.data.datasets[i].data.length - 1; j>= 0;--j)  
                        if (Number(j) == (chart.config.data.datasets[i].data.length - 1))
                            continue;
                        var arc = chart.getDatasetMeta(i).data[j];
                        arc.round = 
                            x: (chart.chartArea.left + chart.chartArea.right) / 2,
                            y: (chart.chartArea.top + chart.chartArea.bottom) / 2,
                            radius: chart.innerRadius + chart.radiusLength / 2 + (a * chart.radiusLength),
                            thickness: chart.radiusLength / 2 - 1,
                            backgroundColor: arc._model.backgroundColor
                        
                    
                    a--;
                
        ,

        afterDraw: function (chart) 
                var ctx = chart.chart.ctx;
                for (let i in chart.config.data.datasets) 
                    for(var j = chart.config.data.datasets[i].data.length - 1; j>= 0;--j)  
                        if (Number(j) == (chart.config.data.datasets[i].data.length - 1))
                            continue;
                        var arc = chart.getDatasetMeta(i).data[j];
                        var startAngle = Math.PI / 2 - arc._view.startAngle;
                        var endAngle = Math.PI / 2 - arc._view.endAngle;

                        ctx.save();
                        ctx.translate(arc.round.x, arc.round.y);
                        console.log(arc.round.startAngle)
                        ctx.fillStyle = arc.round.backgroundColor;
                        ctx.beginPath();
                        //ctx.arc(arc.round.radius * Math.sin(startAngle), arc.round.radius * Math.cos(startAngle), arc.round.thickness, 0, 2 * Math.PI);
                        ctx.arc(arc.round.radius * Math.sin(endAngle), arc.round.radius * Math.cos(endAngle), arc.round.thickness, 0, 2 * Math.PI);
                        ctx.closePath();
                        ctx.fill();
                        ctx.restore();
                    
                
        ,
    );

小提琴 - http://jsfiddle.net/tgyxmkLj/1/

【讨论】：

非常感谢。太棒了。

很高兴我能帮上忙 :)

【参考方案2】：

这不是您可能正在寻找的确切答案，但这是我为多个数据集获得圆角边缘的要求。这个在每个甜甜圈数据集中四舍五入一种颜色。

我使用Chart.js Doughnut with rounded edges and text centered 的答案并进行了一些更改。代码如下：

        // round corners
    Chart.pluginService.register(
        afterUpdate: function (chart) 
            if (chart.config.options.elements.arc.roundedCornersFor !== undefined) 
                var a=chart.config.data.datasets.length -1;
                for (let i in chart.config.data.datasets) 
                    var arc = chart.getDatasetMeta(i).data[chart.config.options.elements.arc.roundedCornersFor];

                    arc.round = 
                        x: (chart.chartArea.left + chart.chartArea.right) / 2,
                        y: (chart.chartArea.top + chart.chartArea.bottom) / 2,
                        radius: chart.innerRadius + chart.radiusLength / 2 + (a * chart.radiusLength),
                        thickness: chart.radiusLength / 2 - 1,
                        backgroundColor: arc._model.backgroundColor
                    
                    a--;
                
            
        ,

        afterDraw: function (chart) 
            if (chart.config.options.elements.arc.roundedCornersFor !== undefined) 
                var ctx = chart.chart.ctx;
                for (let i in chart.config.data.datasets) 
                    var arc = chart.getDatasetMeta(i).data[chart.config.options.elements.arc.roundedCornersFor];
                    var startAngle = Math.PI / 2 - arc._view.startAngle;
                    var endAngle = Math.PI / 2 - arc._view.endAngle;

                    ctx.save();
                    ctx.translate(arc.round.x, arc.round.y);
                    console.log(arc.round.startAngle)
                    ctx.fillStyle = arc.round.backgroundColor;
                    ctx.beginPath();
                    ctx.arc(arc.round.radius * Math.sin(startAngle), arc.round.radius * Math.cos(startAngle), arc.round.thickness, 0, 2 * Math.PI);
                    ctx.arc(arc.round.radius * Math.sin(endAngle), arc.round.radius * Math.cos(endAngle), arc.round.thickness, 0, 2 * Math.PI);
                    ctx.closePath();
                    ctx.fill();
                    ctx.restore();
                
            
        ,
    );

小提琴：http://jsfiddle.net/n6vLv1zv/

希望它能让你更近一步。

【讨论】：

如果我对半圈做同样的事情，计算会如何变化？有什么想法吗？