chart js pie 차트 afterDraw 실선, 중앙 구현

 

afterDraw: (chart) => {
    const ctx = chart.ctx;
    ctx.font = "20px 'SCDream-light'"
    ctx.save();

    const chartCenterPoint = {
        x: (chart.chartArea.right - chart.chartArea.left) / 2 + chart.chartArea.left,
        y: (chart.chartArea.bottom - chart.chartArea.top) / 2 + chart.chartArea.top
    };

    let sum = 0;
    chart.config.data.labels.forEach((label, i) => {
        const dataset = chart.config.data.datasets[0];
        let value = dataset.data[i];
        sum += value;

        if(i < 6) {
            return true;
        }
        const meta = chart.getDatasetMeta(0);
        const arc = meta.data[i];

        const centerPoint = arc.getCenterPoint();
        const model = arc;
        let color = chart.config._config.data.datasets[0].backgroundColor[i];
        let labelColor = "#323232";

        if (dataset.polyline && dataset.polyline.color) {
            color = dataset.polyline.color;
        }

        if (dataset.polyline && dataset.polyline.labelColor) {
            labelColor = dataset.polyline.labelColor;
        }

        let angle = Math.atan2(centerPoint.y - chartCenterPoint.y, centerPoint.x - chartCenterPoint.x);

        let plusRadius = 20;
        const point2X = chartCenterPoint.x + Math.cos(angle) * (model.outerRadius + plusRadius);
        let point2Y = chartCenterPoint.y + Math.sin(angle) * (model.outerRadius + plusRadius);

        if (dataset.polyline && dataset.polyline.formatter) {
            value = dataset.polyline.formatter(value);
        }

        //DRAW CODE
        if (value !== 0) {
            ctx.strokeStyle = color;
            ctx.lineWidth = 2;
            ctx.beginPath();
            ctx.moveTo(centerPoint.x, centerPoint.y);
            ctx.lineTo(point2X, point2Y);
            ctx.stroke();
        }

        const labelAlignStyle = point2X < chartCenterPoint.x ? "right" : "left";
        const labelX = point2X < chartCenterPoint.x ? point2X : point2X + 2;
        const labelY = point2Y < chartCenterPoint.y ? point2Y : point2Y + 5;

        ctx.textAlign = labelAlignStyle;
        ctx.textBaseline = "bottom";

        ctx.fillStyle = labelColor;
        if (value !== 0) {
            ctx.fillText(`${label}\r\n${value}명`, labelX, labelY);
        }
    });

    //정중앙
    const width = chart.width;
    const height = chart.height;
    ctx.save();
    ctx.fillStyle = '#000'; // 텍스트 색상 설정
    ctx.font = "25px 'SCDream-light'"
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(`정회원 ${sum}명`, width / 2, height / 2 + 20); // 원하는 위치에 텍스트 추가

    ctx.restore();
},