Как сделать диаграмму в форме половины доната?
Я пытаюсь построить диаграмму в форме половины бублика с необычным скруглением делений.
Дизайн выглядит следующим образом:
Решил использовать 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 }, }, } |
<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
Подскажите, как выполнить нужное скругление и в целом избавиться от зазоров между делениями? Возможно ли это сделать с помощью этого инструмента, или необходимо использовать что-то другое?
Дополнительно:
Закругления работают. Ваша проблема в смещении 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> |
<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>
- Без смещения блоки не будут заходить друг за друга, как того требует дизайн, для этого оно и добавлено
- Арсений, поправил ответ, ваша задача поместить диаграмму внутри canvas. В моём примере я использую scale.
- Арсений, при наведении баг появился, но сути не меняет, копайте в направлении масштабирования. Т.к. ваше смещение в отрицательную сторону, прячет кусок диаграммы за видимой областью canvas.
- Спасибо! Буду докручивать тогда, чтобы нижние грани были на одной линии
- Арсений, я ничего толкового не нашёл, но если отключить responsive: true результат более контролируемый, возможно даже баг исчезнет, попробуйте.
- Если отключить, то всё ломается, но поэкспериментирую.
А вообще, ваше решение работает для меня, благодарю!
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания диаграммы в форме половины доната, можно воспользоваться библиотекой для создания графиков, такой как Chart.js. В данном случае, я предположу, что вы работаете с языком программирования PHP.
Прежде всего, вам необходимо подключить библиотеку Chart.js к вашему проекту. Вы можете сделать это, добавив ссылку на CDN в вашем HTML файле:
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
Затем, вам необходимо создать HTML элемент, в котором будет отображаться ваш график:
<canvas id="myChart"></canvas>
Далее, вам нужно написать JavaScript код, который будет инициализировать и настраивать ваш график. Вот пример кода для создания диаграммы в форме половины доната:
var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'doughnut', data: { datasets: [{ data: [40, 60], backgroundColor: [ 'rgba(255, 99, 132, 0.5)', 'rgba(54, 162, 235, 0.5)' ] }] }, options: { cutoutPercentage: 50 } });
В этом коде мы создаем новый график типа 'doughnut' (донат), передавая данные в формате процентного соотношения для каждой части диаграммы. Свойство cutoutPercentage позволяет установить процент обрезки внутренней части диаграммы, что и создает форму половины доната.
Надеюсь, это поможет вам создать диаграмму в форме половины доната в вашем проекте на PHP. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их.