Javascript 如何使用图表js为甜甜圈添加背景色

我正在使用chart.js绘制甜甜圈图表。使用“fillText”我在甜甜圈图表的中间添加了文本。但是我如何为中间添加背景色呢

这是我的密码

javascript

<script>

        var doughnutData = [
                {
                    value: 300,
                    color:"#F7464A",
                    highlight: "#FF5A5E",
                    label: "Red"
                },
                {
                    value: 50,
                    color: "#46BFBD",
                    highlight: "#5AD3D1",
                    label: "Green"
                },
                {
                    value: 100,
                    color: "#FDB45C",
                    highlight: "#FFC870",
                    label: "Yellow"
                },
                {
                    value: 40,
                    color: "#949FB1",
                    highlight: "#A8B3C5",
                    label: "Grey"
                },
                {
                    value: 120,
                    color: "#4D5360",
                    highlight: "#616774",
                    label: "Dark Grey"
                }

            ];

            window.onload = function(){
                var ctx = document.getElementById("chart-area").getContext("2d");
                var option = 
                    {

                        //prevents the text vanishing on redraw (when tooltip shows on hover)
                        showTooltips: false,

                        //nicer than default bouncing
                        animationEasing: "easeOut",

                        //bit smoother with less steps
                        animationSteps: 40,

                        //do once on completion rather than every frame/draw cycle
                        onAnimationComplete: function () {

                            //setup the font and center it's position
                            this.chart.ctx.font = 'Normal 18px Ariel';
                            this.chart.ctx.textAlign = 'center';
                            this.chart.ctx.textBaseline = 'middle';


                            //put the pabel together based on the given 'skilled' percentage
                            var valueLabel = this.segments[0].value + '%';

                            //find the center point
                            var x = this.chart.canvas.clientWidth / 2;
                            var y = this.chart.canvas.clientHeight / 2;

                            //hack to center different fonts
                            var x_fix = 0;
                            var y_fix = 2;

                            //render the text
                            this.chart.ctx.fillText("Text", x + x_fix, y + y_fix);
                            this.chart.ctx.fillStyle("red");
                            //this.chart.ctx.fill();
                        }
                    };
                window.myDoughnut = new Chart(ctx).Doughnut(doughnutData,option, {responsive : true});
            };



    </script>

var doughnutData=[
{
价值：300，
颜色：#F7464A“，
亮点：“FF5A5E”，
标签：“红色”
},
{
价值：50，
颜色：“46BFBD”，
亮点：“5AD3D1”，
标签：“绿色”
},
{
数值：100，
颜色：“FDB45C”，
亮点：“FFC870”，
标签：“黄色”
},
{
价值：40，
颜色：“949FB1”，
亮点：“A8B3C5”，
标签：“灰色”
},
{
数值：120，
颜色：“4D5360”，
亮点：“616774”，
标签：“深灰色”
}
];
window.onload=函数（）{
var ctx=document.getElementById（“图表区”）.getContext（“2d”）；
var选项=
{
//防止文本在重画时消失（悬停时显示工具提示）
showTooltips:false，
//比默认反弹更好
动画化：“easeOut”，
//用更少的步骤使位更平滑
动画步骤：40，
//完成时执行一次，而不是每帧/绘制周期执行一次
onAnimationComplete:函数（）{
//设置字体并将其位置居中
this.chart.ctx.font='Normal 18px Ariel'；
this.chart.ctx.textAlign='center'；
this.chart.ctx.textBaseline='middle'；
//根据给定的“熟练”百分比将pabel放在一起
var valueLabel=this.segments[0]。值+'%'；
//找到中心点
var x=this.chart.canvas.clientWidth/2；
var y=this.chart.canvas.clientHeight/2；
//黑客中心不同的字体
var x_fix=0；
变量y_fix=2；
//渲染文本
this.chart.ctx.fillText（“Text”，x+x\u fix，y+y\u fix）；
this.chart.ctx.fillStyle（“红色”）；
//this.chart.ctx.fill（）；
}
};
window.myDoughnut=新图表（ctx）.Doughnut（doughnutData，选项，{responsive:true}）；
};

HTML

chart.js必须包括

只有中间我必须添加背景色。（对于“文本”，我必须添加背景色）

我试过使用这个.chart.ctx.fillStyle（“红色”）；还有这个.chart.ctx.fillStyle（“红色”，x+x\u-fix，y+y\u-fix）；但两者都不起作用

---

谢谢

两个小时后我得到了答案

在添加文本之前添加圆圈代码

this.chart.ctx.beginPath();
this.chart.ctx.arc(x,y,80,0,2*Math.PI);
this.chart.ctx.fillStyle = '#8AC007';
this.chart.ctx.fill();
this.chart.ctx.lineWidth = 5;
this.chart.ctx.strokeStyle = '#003300';
this.chart.ctx.stroke();
this.chart.ctx.fillStyle = 'blue';
this.chart.ctx.fillText("Text", x + x_fix, y + y_fix);

---

结果将如上图所示

如何或在何处添加此代码？我的JS不是很好。你能帮我吗？你必须在脚本标签中添加。如果这不起作用，请共享您的代码。或者解释一下你到目前为止做了什么。谢谢你回来，这就是我要做的。我已经更新了密码笔。检查此链接，您必须正确放置x、y位置，然后它将修复。

this.chart.ctx.beginPath();
this.chart.ctx.arc(x,y,80,0,2*Math.PI);
this.chart.ctx.fillStyle = '#8AC007';
this.chart.ctx.fill();
this.chart.ctx.lineWidth = 5;
this.chart.ctx.strokeStyle = '#003300';
this.chart.ctx.stroke();
this.chart.ctx.fillStyle = 'blue';
this.chart.ctx.fillText("Text", x + x_fix, y + y_fix);