배경

업무로 도넛형의 원 그래프를 표시할 필요가 있고, JavaScript 플러그인을 조사했는데, chart.js 가 좋을 것 같았으므로, 그 때 만든 샘플의 메모로서 이 기사를 남겨 둡니다.

하고 싶은 일

도넛 모양의 원형 차트 표시

도넛 공동의 크기 조정

말굽 모양으로 만들기

완성 시스템

소스는 이쪽(CodePen)

공동의 크기 조정

options.cutout의 값을 설정하고 조정했습니다.
도넛형 원형 차트에서는 초기값이 50입니다.

초기값 그대로


공동의 비율을 75%로 변경

    options: {
        responsive: false,
        cutout: 75,
    }

공동의 비율을 크게함으로써 얇은 도넛 모양의 원형 차트가됩니다.

말굽 형 도넛 원형 차트

말굽형으로 하기 위해서는 원 그래프의 원의 길이를 우선은 지정합니다.
options.circumference에서 0~360 범위로 지정합니다.

또한 필요에 따라 원하는 방향으로 원을 회전합니다.
options.rotation에서 상단을 시작으로 시계 방향으로 0~360 또는 -180~180으로 지정합니다.

원의 길이를 280도로 한 경우

    options: {
        responsive: false,
        cutout: 75,
        circumference: 280,
    }

그래프를 220(-140)도 회전한 경우

    options: {
        responsive: false,
        cutout: 75,
        rotation: 220,
        circumference: 280,
    }

이것으로 아래를 향한 말굽형의 도넛 원 그래프가 생겼습니다.

아무것도 하지 않으면 틈이 나왔기 때문에 지웠습니다.

data.datasets의 borderWidth를 지정하지 않으면 기본적으로 흰색 테두리가 그려집니다.
※ 알기 쉽게 배경에 rbga(0,0,0,.5)를 지정하고 있습니다.


이 테두리를 지우려면 borderWidth에 0을 지정하면 OK입니다.

    data: {
        datasets: [{
            data: [10, 90],
            backgroundColor: ['rgba(30, 30, 116, 1)', 'rgba(0, 0, 0, 0.1)'],
            borderWidth: 0
        }],
    },

툴팁 이란

툴팁이 필요하지 않으면 options.plugins.tooltip에 false를 지정하십시오.

    options: {
        plugins: {
            tooltip: false
        },