如何使用图表，js为甜甜圈mid添加背景颜色

Question

我使用chart.js绘制圆环图。使用'fillText'我在圆环图的中间部分添加文字。但我如何为中间提供背景颜色

这是我的代码

的javascript

echo 'all.o'
all.o

HTML

<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>

chart.js必须包括

仅针对中间我必须添加背景色。 （对于'text'我必须添加背景颜色）

我试过过this.chart.ctx.fillStyle（“red”）;和this.chart.ctx.fillStyle（“red”，x + x_fix，y + y_fix）;但两个都没有工作

谢谢