使用 Chart.js 绘制半圆环图

Question

有没有办法为chart.js 甜甜圈图实现动画指标？我想要完成的事情是这样的：

我已经完成了图表的甜甜圈部分，但似乎无法找到添加值（大文本：89%（动态））或指标点的方法。

我使用的代码如下：

HTML

<canvas id="dashboardChart" width="400" height="400"></canvas>

JS

var ctx = document.getElementById("dashboardChart");
    var dashboardChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ["Red", "Orange", "Green"],
            datasets: [{
                label: '# of Votes',
                data: [33, 33, 33],
                backgroundColor: [
                    'rgba(231, 76, 60, 1)',
                    'rgba(255, 164, 46, 1)',
                    'rgba(46, 204, 113, 1)'
                ],
                borderColor: [
                    'rgba(255, 255, 255 ,1)',
                    'rgba(255, 255, 255 ,1)',
                    'rgba(255, 255, 255 ,1)'
                ],
                borderWidth: 5
            }]

        },
        options: {
            rotation: 1 * Math.PI,
            circumference: 1 * Math.PI,
            legend: {
                display: false
            },
            tooltip: {
                enabled: false
            },
            cutoutPercentage: 95
        }
    });

任何帮助是极大的赞赏！

Answer 1

为了帮助您开始，我使用以下选项配置获得了一个半甜甜圈，或者我称之为速度计图：

var chart = new Chart(canvas, {
  type: 'doughnut',
  data: ['400', '200'],
  options: {
    rotation: -90,
    circumference: 180,
  }
}

Chartjs 版本 3.5.1

Answer 2

原答案：

我不确定是否有快速简单的解决方案。

也许您可以直接在现有饼图的顶部创建第二个饼图，并让该饼图的周长只有几个像素，但以 X% 旋转，在本例中为 89%。需要一点数学才能算出半圆的 89% 在哪里。根据上面的图片，这不会给你一个漂亮的圆圈标记。它会给你一个小的彩色段，圆圈标记应该在那里，在一些 css 的帮助下，这个第二个饼图段可以四舍五入，看起来像你想要的。

第二个饼图可能看起来像这样......

var ctx2 = document.getElementById("dashboardChart2");
    var dashboardChart2 = new Chart(ctx2, {
        type: 'doughnut',
        data: {
            labels: ["Purple"],
            datasets: [{
                label: '# of Votes',
                data: [5],
                backgroundColor: [
                   'rgba(159, 90, 253, 1)'
                ],
                borderColor: [
                    'rgba(255, 255, 255 ,1)',
                ],
                borderWidth: 2
            }]

        },
        options: {
            rotation: 1 * Math.PI,/** This is where you need to work out where 89% is */
            circumference: 1 * Math.PI,/** put in a much smaller amount  so it does not take up an entire semi circle */
            legend: {
                display: false
            },
            tooltip: {
                enabled: false
            },
            cutoutPercentage: 95
        }
    });

至于可能涉及 css 的大 89%。将文本直接定位在饼图的“前面”（涉及 z-index 和绝对位置等内容）

新答案：

也许您可以直接在现有圆环图的顶部创建一个圆环图，并让圆环图的第一个和第三个“条”的不透明度为 0，因此它们不可见。如果第一个柱的值为 88.5，第二个柱的值为 1，第三个柱的值为 10.5，您将有效地将第二个柱置于 89%，宽度为 1% (88.5 + 1 + 10.5 = 100）。

datasets: [{
   data: [88.5, 1,10.5],// how much space each bar should take 
   backgroundColor: [
      "rgba(0,0,0,0)", // bar 1: opacity 0
      "rgba(255,255,255,1)", // bar 2 is white
      "rgba(0,0,0,0)", // bar 3: opacity 0
   ],
   borderColor: [
      'rgba(0, 0, 0 ,0)',// bar 1 border opacity 0
      'rgba(46, 204, 113, 1)',// bar 2 border is green
      'rgba(0, 0, 0 ,0)'// bar 3 border opacity 0
   ],
   borderWidth: 3
}]

至于可能涉及 css 的大 89%。将文本直接定位在饼图的“前面”

.percent {
 position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    font-size: 80px;
    bottom: 0;
}

在尝试了小提琴之后，我有了这个......

示例在这里：

https://jsfiddle.net/rjtsbeLc/3/

请注意，通过相对和绝对定位，我将第二个圆环图放在现有圆环图的顶部，并将其顶部的百分比文本放在中间的底部。

.outer {
  position: relative;
  width: 600px;
  height: 400px;
}
canvas {
  position: absolute;
}

这不是您要找的东西，因为“圆圈”是矩形的，但我遇到了这个问题，它可能会帮助您弄清楚如何将矩形四舍五入成圆形......

Chart.js 圆边甜甜圈/sf/answers/2587542331/