Для создания диаграммы в форме половины доната в JavaScript можно использовать различные библиотеки и фреймворки, такие как D3.js, Chart.js или SVG.js.
Начнем с использования библиотеки D3.js. Вам потребуется включить ссылку на файл с библиотекой D3.js в вашем HTML-документе. Это можно сделать следующим образом:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Half Donut Chart</title>
<script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
<svg id="chart"></svg>
<script>
// код для создания диаграммы
</script>
</body>
</html>
Теперь мы можем создать функцию для построения диаграммы половины доната:
// Создаем данные для диаграммы
var data = [
{ label: "Значение 1", value: 40 },
{ label: "Значение 2", value: 60 }
];
// Устанавливаем размеры и позицию диаграммы
var width = 400; // ширина
var height = 400; // высота
var radius = Math.min(width, height) / 2; // радиус
var x = width / 2; // горизонтальный центр
var y = height / 2; // вертикальный центр
// Создаем контейнер для диаграммы
var svg = d3.select("#chart")
.attr("width", width)
.attr("height", height);
var g = svg.append("g")
.attr("transform", "translate(" + x + "," + y + ")");
// Создаем дуги для каждого элемента данных и масштабируем значения
var arc = d3.arc()
.innerRadius(0)
.outerRadius(radius);
// Создаем генераторы данных для диаграммы
var pie = d3.pie()
.value(function(d) { return d.value; })
.sort(null);
// Создаем группу элементов для каждой дуги
var arcs = g.selectAll(".arc")
.data(pie(data))
.enter()
.append("g")
.attr("class", "arc");
// Создаем путь для каждой дуги и устанавливаем цвета
arcs.append("path")
.attr("d", arc)
.attr("fill", function(d, i) {
return i === 0 ? "red" : "blue" ;
});
В результате этого кода будет создана диаграмма половины доната с двумя секторами различных цветов. Диаграмма будет отображаться внутри элемента svg с id "chart".
Вы можете настроить этот код, добавив больше данных и изменяя цвета и стили диаграммы.