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();
},

//ex) http://127.0.0.1?name=ddu&age=99

new URLSearchParams(location.search).get('name') //ddu

new URLSearchParams(location.search).get('age') //99

예를들어 실제데이터가 [2019-12-31, 2020-01-01] 이러한데 테이블에 렌더링할때는 12-31, 01-01 으로 표시되길 원한다면

이런식으로 렌더링 옵션을 줌.

하지만 칼럼을눌러 정렬을하면 원하는대로 정렬이되지않음 desc로하면 12-31, 01-01 asc로하면 01-01-12-31 Text기준 정렬이기때문에 원하는대로 동작하지않는다

렌더링옵션을 이렇게준다면

테이블에 표시는 12-31, 01-01 식으로 될거고 정렬은 실제 data그대로 써서 원하는대로 동작한다

예를들어 url이 http://dduruddung.tistory.com?name=dduruddung&age=99 일때 name의 값을뽑고싶다면

했을때 foo에는 'dduruddung'이들어간다.

age의 값 99를 뽑고싶다면 get('name') 부분을 get('age') 로 바꾸면된다.