如何在 Chart.JS 的半圆环图中间添加一些文本？

Question

它应该看起来像这样：

我已经有了图表，只是缺少文本。 是否可以选择在图表中间获取文本？

编辑：可以在此处找到此类图的示例： https : //jsfiddle.net/wt4260qf/1/

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        rotation: 1 * Math.PI,
        circumference: 1 * Math.PI
    }
});

Answer 1

感谢@DTul ，我明白了。 标题配置如下： https ： //www.chartjs.org/docs/latest/configuration/title.html 。

我添加了以下部分：

title: {
   display: true,
   text: 'Custom Chart Title',
   position: 'bottom'
}

options 。

整个示例现在看起来像这样：

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        rotation: 1 * Math.PI,
        circumference: 1 * Math.PI,
        title: {
           display: true,
           text: 'Custom Chart Title',
           position: 'bottom'
        }
     }
});

相应的小提琴在这里： https ： //jsfiddle.net/ktq8​​mb0z/

Answer 2

我用过这个说明

如何在Chart.JS的半圆形图表中间添加一些文本？

文本位置和字体大小的一些更改

var fontSizeToUse = 16;
var centerY = ((chart.chartArea.top + chart.chartArea.bottom) - 80);

http://jsfiddle.net/vencendor/e0c8rgbm/

Answer 3

半甜甜圈，或者我怎么称呼它，速度计图，现在配置了度数：

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

我在 Chartjs 3.5.1 版中做了这个