如何在Chart.JS的半个甜甜圈图中添加一些文本？ [英] How can I add some text in the middle of a half doughnut chart in Chart.JS?

问题描述

它看起来应该像这样：

我已经有了图表，只是缺少了文字。

编辑：可以在此处找到这种图形的示例：

解决方案

感谢 @DTul ，我知道了。标题配置在此处： https://www.chartjs.org/docs/ Latest / configuration / title.html 。

我添加了以下部分：

 标题：{
显示：true，
文本：自定义图表标题，​​
位置：底部 
} 
  

到选项。

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

  var ctx = document.getElementById（ myChart） ; 
 var myChart = new Chart（ctx，{
 type：'doughnut'，
 data：{
标签：[红色，蓝色，黄色，绿色，紫色，橙色]，
数据集：[{{
标签：'＃of Votes'，
数据：[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 
}] 
}，
选项：{
旋转度：1 * Math.PI，
圆周：1 * Math.PI，
标题：{
显示：true，
文本：'Custom图表标题，​​
位置：底部 
} 
} 
}）； 
  

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

It should look somehow like this:

I already have the chart, just the text is missing. Is there an option to get the text in the middle of the chart?

EDIT: An example of such a graph can be found here: 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
    }
});

解决方案

Thanks to @DTul, I figured it out. The title configuration is here: https://www.chartjs.org/docs/latest/configuration/title.html.

I've added the following section:

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

to the options.

The whole example looks now like that:

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

The corresponding fiddle is here: https://jsfiddle.net/ktq8mb0z/

这篇关于如何在Chart.JS的半个甜甜圈图中添加一些文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！