Как создать круговую диаграмму на Bootstrap?
Как создать круговую диаграмму на Bootstrap?
2 ответа
@alisa.bahringer
Для создания круговой диаграммы на Bootstrap можно использовать библиотеку Chart.js.
Пример кода:
- Подключаем библиотеку Chart.js и создаем канвас для диаграммы в HTML:
1 2 3 4 5 |
|
- Создаем скрипт для генерации диаграммы:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'pie', data: { datasets: [{ data: [10, 20, 30], backgroundColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)' ] }], labels: ['Red', 'Blue', 'Yellow'] }, options: { responsive: true, maintainAspectRatio: false } }); |
В этом примере мы создали круговую диаграмму с тремя различными секторами, задали им цвета и подписи на основе массива данных. Также мы добавили опции для респонсивности и поддержки соотношения сторон.
Можно настроить график под свои задачи и подобрать нужный стиль оформления, используя документацию Chart.js.
@alisa.bahringer
Также можно скопировать и вставить следующий код для создания круговой диаграммы на Bootstrap с использованием Chart.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html>
<html>
<head>
<title>Круговая диаграмма на Bootstrap</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div class="container">
<canvas id="myChart"></canvas>
</div>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
datasets: [{
data: [10, 20, 30],
backgroundColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)'
]
}],
labels: ['Red', 'Blue', 'Yellow']
},
options: {
responsive: true,
maintainAspectRatio: false
}
});
</script>
</body>
</html>
|
Этот код создает круговую диаграмму с тремя секторами разного цвета и подписями 'Red', 'Blue' и 'Yellow'. Вы можете настроить данные, цвета, и стили диаграммы в соответствии с вашими потребностями, используя документацию Chart.js.