Как сделать диаграмму в форме половины доната?

Question

[Арсений]

Я пытаюсь построить диаграмму в форме половины бублика с необычным скруглением делений.

Дизайн выглядит следующим образом:


Решил использовать chart.js. Проект написан на vue 3, данные динамические.

В целом удалось повторить дизайн, но никак не получается скругулить боковые углы, в итоге имею вот это:



Мой код выглядит следующим образом:

<template>
    <div class="doughnut">
        <canvas ref="chart"></canvas>
    </div>
</template>

<script setup>

import {onMounted, ref} from "vue";
import {
    Chart,
    DoughnutController,
    ArcElement,
} from 'https://cdn.skypack.dev/chart.js@4.2.1';
  
Chart.register(
    DoughnutController,
    ArcElement,
);

const chart = ref(null);
const data = {
    datasets: [
        {
            data: [33, 23, 8, 7],
            backgroundColor: [
                "#F04B92",
                "#54B2FD",
                "#FFC24B",
                "#49EBCE",
            ],
            display: true,
            offset: 0,
            spacing: -30,
            borderColor: "#fff",
            borderWidth: 2,
            borderRadius: {outerStart: 16,  outerEnd: 0, innerStart: 16},
            cutout: "58%",
        }
    ],
    labels: false
};

const config = {
    type: 'doughnut',
    data,
    options: {
        rotation: 270,
        circumference: 180,
        maintainAspectRatio: false,
        responsive: true,
        animation: {
            animateRotate: true
        },
    },
}

Так же вот тут есть полностью рабочий пример https://codepen.io/yurikssi/pen/yLGVBPm

Подскажите, как выполнить нужное скругление и в целом избавиться от зазоров между делениями? Возможно ли это сделать с помощью этого инструмента, или необходимо использовать что-то другое?

Answer 1

[historydev]

Закругления работают. Ваша проблема в смещении spacing на -30:

<template>
    <div class="doughnut">
        <canvas ref="chart"></canvas>
    </div>
</template>

<script setup>

import {onMounted, ref} from "vue";
import {
    Chart,
    DoughnutController,
    ArcElement,
} from 'https://cdn.skypack.dev/chart.js@4.2.1';
  
Chart.register(
    DoughnutController,
    ArcElement,
);

const chart = ref(null);

const data = {
    datasets: [
        {
            data: [40, 22, 8, 30],
            backgroundColor: [
                "#F04B92",
                "#54B2FD",
                "#FFC24B",
                "#49EBCE",
            ],
            display: true,
            offset: 2,
            spacing: -30,
            borderColor: "#fff",
            borderWidth: 2,
            borderRadius: [
                {outerStart: 16,  outerEnd: 2, innerStart: 16},
                {outerStart: 16,  outerEnd: 2, innerStart: 16},
                {outerStart: 16,  outerEnd: 2, innerStart: 16},
                {outerStart: 16,  outerEnd: 16, innerStart: 16, innerEnd: 16}
            ],
            cutout: "58%",
        }
    ],
    labels: false
};

const config = {
    type: 'doughnut',
    data,
    options: {
        rotation: 270,
        circumference: 180,
        maintainAspectRatio: false,
        responsive: true,
        animation: {
            animateRotate: true
        }
    },
}

onMounted(() => {
  
    const myChart = new Chart(
        chart.value,
        config
    );
  
    const ctx = myChart.canvas.getContext("2d");

    ctx.scale(0.8, 0.8);
});
  
  

</script>

Comments

[Арсений]

Без смещения блоки не будут заходить друг за друга, как того требует дизайн, для этого оно и добавлено

[historydev]

Арсений, поправил ответ, ваша задача поместить диаграмму внутри canvas. В моём примере я использую scale.

[historydev]

Арсений, при наведении баг появился, но сути не меняет, копайте в направлении масштабирования. Т.к. ваше смещение в отрицательную сторону, прячет кусок диаграммы за видимой областью canvas.

[Арсений]

Спасибо! Буду докручивать тогда, чтобы нижние грани были на одной линии

[historydev]

Арсений, я ничего толкового не нашёл, но если отключить responsive: true результат более контролируемый, возможно даже баг исчезнет, попробуйте.

[Арсений]

Если отключить, то всё ломается, но поэкспериментирую.
А вообще, ваше решение работает для меня, благодарю!