Chart.js圆角边框的圆环 [英] Chart.js Doughnut with rounded edges

问题描述

我创建了一个具有Chart.js的圆环图，我希望它的两端都有圆角。
我想要这样：

但是我有这样，有尖锐的边缘：

我发现的最好的答案是：

---

脚本

  Chart.defaults.RoundedDoughnut = Chart.helpers.clone Chart.defaults.doughnut）; 
 Chart.controllers.RoundedDoughnut = Chart.controllers.doughnut.extend（{
 draw：function（ease）{
 var ctx = this.chart.chart.ctx; 
 
 var easingDecimal = ease || 1; 
 Chart.helpers.each（this.getDataset（）。metaData，function（arc，index）{
 arc.transition（easingDecimal）.draw ; 
 
 var vm = arc._view; 
 var radius =（vm.outerRadius + vm.innerRadius）/ 2; 
 var thickness =（vm.outerRadius  -  vm.innerRadius ）/ 2; 
 var angle = Math.PI  -  vm.endAngle  -  Math.PI / 2; 
 
 ctx.save（）; 
 ctx.fillStyle = vm.backgroundColor ; 
 ctx.translate（vm.x，vm.y）; 
 ctx.beginPath（）; 
 ctx.arc（radius * Math.sin（angle），radius * Math.cos （角度），厚度，0,2 * Math.PI）; 
 ctx.arc（radius * Math.sin（Math.PI），radius * Math.cos（Math.PI），thickness，0，2 * Math.PI）; 
 ctx.closePath（）; 
 ctx.fill（）; 
 ctx.restore（）; 
}）; 
}，
}）; 
  

，然后

 code> ... 
 type：'RoundedDoughnut'，
 ... 
  

$ b b

---

堆栈片段

  Chart.defaults.RoundedDoughnut = Chart.helpers.clone（Chart.defaults.doughnut）; Chart.controllers.RoundedDoughnut = Chart.controllers.doughnut.extend（{draw：function（ease）{var ctx = this.chart.chart.ctx; var easingDecimal = ease || 1; Chart.helpers.each（this.getDataset （vm.outerRadius + vm.innerRadius）/ 2; var thickness =（vm.outerRadius + vm.innerRadius）/ 2; var。 .outerRadius  -  vm.innerRadius）/ 2; var angle = Math.PI  -  vm.endAngle  -  Math.PI / 2; ctx.save（）; ctx.fillStyle = vm.backgroundColor; ctx.translate（vm.x，vm .y）; ctx.beginPath（）; ctx.arc（radius * Math.sin（angle），radius * Math.cos（angle），thickness，0，2 * Math.PI）; ctx.arc .sin（Math.PI），radius * Math.cos（Math.PI），thickness，0，2 * Math.PI）; ctx.closePath（）; ctx.fill（）; ctx.restore（）; }）; }，}）; var deliveredData = {labels：[Value]，datasets：[{data：[85，15]，backgroundColor：[＃3ec556，rgba（0,0,0,0）]，hoverBackgroundColor： ＃3ec556，rgba（0,0,0,0）]，borderWidth：[0，0]}]}; var deliveredOpt = {cutoutPercentage：88，animation：{animationRotate：true，duration：2000}，legend：{display：false}，tooltips：{enabled：false}}; var chart = new Chart（$（'＃openedCanvas'），{type：'RoundedDoughnut'，data：deliveredData，options：deliveredOpt}）;   < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js >< / script>< script src =https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.1/Chart.bundle.min.js>< / script> ;< canvas id =openedCanvasheight =230width =680>< / canvas>  
 
I created a donut chart with Chart.js and I want it to have rounded edges at both ends.
I want it to be like this:



But I have it like this, with sharp edges:



The best I found was this answer: How to put rounded corners on a Chart.js Bar chart, but it is for bar charts, and I have no clue of how to adapt it for doughnuts..

Here is my code:

HTML
<div class="modal-div-canvas js-chart">
  <div class="chart-canvas">
     <canvas id="openedCanvas" width="1" height="1"></canvas>
        <div class="chart-background"></div>
            <span class="chart-unique-value">
                 <span class="js-count">
                    85
                 </span>
                 <span class="cuv-percent">%</span>
            </span>
        </div>
  </div>


JS
var deliveredData = {
        labels: [
            "Value"
        ],
        datasets: [
            {
                data: [85, 15)],
                backgroundColor: [
                    "#3ec556",
                    "rgba(0,0,0,0)"
                ],
                hoverBackgroundColor: [
                    "#3ec556",
                    "rgba(0,0,0,0)"
                ],
                borderWidth: [
                    0, 0
                ]
            }]
    };

    var deliveredOpt = {
        cutoutPercentage: 88,
        animation: {
            animationRotate: true,
            duration: 2000
        },
        legend: {
            display: false
        },
        tooltips: {
            enabled: false
        }
    };

   var chart = new Chart($('#openedCanvas'), {
        type: 'doughnut',
        data: deliveredData,
        options: deliveredOpt
    });
}};
Someone know how to do this?
解决方案
You can extend the chart to do this



Preview





Script
Chart.defaults.RoundedDoughnut = Chart.helpers.clone(Chart.defaults.doughnut);
Chart.controllers.RoundedDoughnut = Chart.controllers.doughnut.extend({
    draw: function (ease) {
        var ctx = this.chart.chart.ctx;

        var easingDecimal = ease || 1;
        Chart.helpers.each(this.getDataset().metaData, function (arc, index) {
            arc.transition(easingDecimal).draw();

            var vm = arc._view;
            var radius = (vm.outerRadius + vm.innerRadius) / 2;
            var thickness = (vm.outerRadius - vm.innerRadius) / 2;
            var angle = Math.PI - vm.endAngle - Math.PI / 2;

            ctx.save();
            ctx.fillStyle = vm.backgroundColor;
            ctx.translate(vm.x, vm.y);
            ctx.beginPath();
            ctx.arc(radius * Math.sin(angle), radius * Math.cos(angle), thickness, 0, 2 * Math.PI);
            ctx.arc(radius * Math.sin(Math.PI), radius * Math.cos(Math.PI), thickness, 0, 2 * Math.PI);
            ctx.closePath();
            ctx.fill();
            ctx.restore();
        });
    },
});
and then
...
type: 'RoundedDoughnut',
...




Stack Snippet



Chart.defaults.RoundedDoughnut = Chart.helpers.clone(Chart.defaults.doughnut);
        Chart.controllers.RoundedDoughnut = Chart.controllers.doughnut.extend({
            draw: function (ease) {
            		var ctx = this.chart.chart.ctx;
                
                var easingDecimal = ease || 1;
                Chart.helpers.each(this.getDataset().metaData, function (arc, index) {
                    arc.transition(easingDecimal).draw();

                    var vm = arc._view;
                    var radius = (vm.outerRadius + vm.innerRadius) / 2;
                    var thickness = (vm.outerRadius - vm.innerRadius) / 2;
                    var angle = Math.PI - vm.endAngle - Math.PI / 2;
                    
                    ctx.save();
                    ctx.fillStyle = vm.backgroundColor;
                    ctx.translate(vm.x, vm.y);
                    ctx.beginPath();
                    ctx.arc(radius * Math.sin(angle), radius * Math.cos(angle), thickness, 0, 2 * Math.PI);
                    ctx.arc(radius * Math.sin(Math.PI), radius * Math.cos(Math.PI), thickness, 0, 2 * Math.PI);
                    ctx.closePath();
                    ctx.fill();
                    ctx.restore();
                });
            },
        });

        var deliveredData = {
            labels: [
                "Value"
            ],
            datasets: [
                {
                    data: [85, 15],
                    backgroundColor: [
                        "#3ec556",
                        "rgba(0,0,0,0)"
                    ],
                    hoverBackgroundColor: [
                        "#3ec556",
                        "rgba(0,0,0,0)"
                    ],
                    borderWidth: [
                        0, 0
                    ]
                }]
        };

        var deliveredOpt = {
            cutoutPercentage: 88,
            animation: {
                animationRotate: true,
                duration: 2000
            },
            legend: {
                display: false
            },
            tooltips: {
                enabled: false
            }
        };

        var chart = new Chart($('#openedCanvas'), {
            type: 'RoundedDoughnut',
            data: deliveredData,
            options: deliveredOpt
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.1/Chart.bundle.min.js"></script>

<canvas id="openedCanvas" height="230" width="680"></canvas>





                        
这篇关于Chart.js圆角边框的圆环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！