Chart.js圆边圆环图

pcww981p 于 2022-11-06 发布在 Chart.js

关注(0)|答案(5)|浏览(289)

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

但我有这样的，有锋利的边缘：

我找到的最好的答案是：How to put rounded corners on a Chart.js Bar chart，但它是用于条形图的，我完全不知道如何将它改编为甜甜圈。
下面是我的代码：

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>

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

有人知道怎么做吗？

chart.js

来源：https://stackoverflow.com/questions/36934967/chart-js-doughnut-with-rounded-edges

5条答案

按热度按时间

f2uvfpb91#

您可以扩展图表来完成此操作

预览

脚本

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

然后再

...
type: 'RoundedDoughnut',
...

堆栈代码段

第一个

赞(0）回复(0）举报 2022-11-06

xqk2d5yq2#

我在@potatopeeling代码段中做了一些修改，使其与chart.js的较新版本（2.9.x）兼容，还修复了“startArc”的渲染位置，以及上一个片段的颜色以匹配“startArc”，因此我们可以有2个以上的片段。结果如下：

第一个

赞(0）回复(0）举报 2022-11-06

3mpgtkmj3#

[Adapted for Vue]如果您正在使用Vue，请使用以下内容：

<script>
import { generateChart, mixins } from 'vue-chartjs';
import Chart from 'chart.js';
import { doughnutChartOptions } from './config';
import { centerTextPlugin } from '@/utils/doughnut-chart';

const { reactiveProp } = mixins;

Chart.defaults.RoundedDoughnut = Chart.helpers.clone(Chart.defaults.doughnut);
Chart.controllers.RoundedDoughnut = Chart.controllers.doughnut.extend({
  draw(ease) {
    const { ctx } = this.chart;
    const easingDecimal = ease || 1;
    const arcs = this.getMeta().data;
    Chart.helpers.each(arcs, (arc, i) => {
      arc.transition(easingDecimal).draw();
      const pArc = arcs[i === 0 ? arcs.length - 1 : i - 1];
      const pColor = pArc._view.backgroundColor;
      const vm = arc._view;
      const radius = (vm.outerRadius + vm.innerRadius) / 2;
      const thickness = (vm.outerRadius - vm.innerRadius) / 2;
      const startAngle = Math.PI - vm.startAngle - Math.PI / 2;
      const angle = Math.PI - vm.endAngle - Math.PI / 2;
      ctx.save();
      ctx.translate(vm.x, vm.y);
      ctx.fillStyle = i === 0 ? vm.backgroundColor : pColor;
      ctx.beginPath();
      ctx.arc(radius * Math.sin(startAngle), radius * Math.cos(startAngle), thickness, 0, 2 * Math.PI);
      ctx.fill();
      ctx.fillStyle = vm.backgroundColor;
      ctx.beginPath();
      ctx.arc(radius * Math.sin(angle), radius * Math.cos(angle), thickness, 0, 2 * Math.PI);
      ctx.fill();
      ctx.restore();
    });
  },
});
const RoundedDoughnut = generateChart('custom-rounded-doughnut', 'RoundedDoughnut');

export default {
  extends: RoundedDoughnut,
  mixins: [reactiveProp],
  props: {
    data: {
      type: Object,
    },
  },
  data() {
    return {
      options: doughnutChartOptions,
    };
  },
  mounted() {
    this.addPlugin(centerTextPlugin);
    this.renderChart(this.data, this.options);
  },
};
</script>

赞(0）回复(0）举报 2022-11-06

kcugc4gi4#

V3答案基于answer from wahab memon，但经过编辑，因此适用于所有元素：

第一个

赞(0）回复(0）举报 2022-11-06

zdwk9cvp5#

图表js中的圆环图边缘的舍入存在问题。此软件包使用插件来解决此问题。
圆边圆环https://www.npmjs.com/package/rounded-edge-donut
使用情况https://codesandbox.io/s/uetg19?file=/src/App.js

赞(0）回复(0）举报 2022-11-06