Javascript-如何在Chart.JS的半个甜甜圈图中添加一些文本?

前端之家收集整理的这篇文章主要介绍了Javascript-如何在Chart.JS的半个甜甜圈图中添加一些文本? 前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

它看起来应该像这样:

我已经有了图表,只是缺少文本.是否可以在图表中间获取文本?

编辑:可以在这里找到这种图形的示例: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,'rgba(255,206,86,'rgba(75,192,'rgba(153,102,255,159,64,0.2)'
            ],borderColor: [
                'rgba(255,1)',1)'
            ],borderWidth: 1
        }]
    },options: {
        rotation: 1 * Math.PI,circumference: 1 * Math.PI
    }
});

enter image description here

最佳答案
多亏了@DTul,我才知道了.标题配置在这里:https://www.chartjs.org/docs/latest/configuration/title.html.

添加了以下部分:

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

选项.

现在,整个示例如下所示:

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx,circumference: 1 * Math.PI,title: {
           display: true,position: 'bottom'
        }
     }
});

相应的小提琴在这里:https://jsfiddle.net/ktq8mb0z/

猜你在找的JavaScript相关文章