如何使用Chart，JS为甜甜圈中添加背景色 [英] How to add background color for doughnut mid using chart,js

问题描述

我正在使用chart.js绘制甜甜圈图。我使用'fillText'在圆环图的中间添加文本。但是我如何给中间的背景色

I am using chart.js for drawing doughnut chart. Using 'fillText' I am adding text at the middle part of doughnut chart.But how i can give a background color for the middle

这是我的代码

javascript

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>

HTML

<div id="canvas-holder">
            <canvas id="chart-area" width="300" height="300"/>
        </div>

chart.js必须包含

chart.js has to include

仅对于中间，我必须添加背景色。 （对于文本，我必须添加背景色）

only for the middle I have to add background color. (for 'text' i have to add background color)

我尝试过使用this.chart.ctx.fillStyle（ red）;和this.chart.ctx.fillStyle（ red，x + x_fix，y + y_fix）;但都不能正常工作

I have tried with this.chart.ctx.fillStyle("red"); and this.chart.ctx.fillStyle("red", x + x_fix, y + y_fix); but both not working

谢谢你

推荐答案

2小时后，我得到答案

After 2 hours I got the answer

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

add the circle code before adding the text

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

结果将类似于上图

这篇关于如何使用Chart，JS为甜甜圈中添加背景色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！