Визуализация данных играет решающую роль в эффективном представлении информации. Круговые диаграммы — популярный выбор для отображения пропорций и процентов. В этой статье мы рассмотрим несколько методов создания круговых диаграмм Google со значениями, отображаемыми в центре. Мы предоставим примеры кода для демонстрации каждого метода, что позволит вам выбрать тот, который лучше всего соответствует вашим потребностям.
Метод 1: API Google Charts
Google Charts — это мощная библиотека диаграмм на основе JavaScript, позволяющая создавать интерактивные и настраиваемые диаграммы. Чтобы создать круговую диаграмму с центром ценности, вы можете использовать API Google Charts и настроить параметры диаграммы.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 8],
['Sleep', 8],
['Study', 4],
['Exercise', 2],
['Socialize', 2]
]);
var options = {
title: 'Daily Activities',
pieHole: 0.5,
pieSliceText: 'none',
legend: 'none',
pieSliceBorderColor: 'transparent',
slices: {
0: { textStyle: { color: 'black', fontSize: 14 } },
1: { textStyle: { color: 'black', fontSize: 14 } },
2: { textStyle: { color: 'black', fontSize: 14 } },
3: { textStyle: { color: 'black', fontSize: 14 } },
4: { textStyle: { color: 'black', fontSize: 14 } }
},
chartArea: { left: 30, top: 50, width: '100%', height: '80%' }
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart" ></div>
</body>
</html>Метод 2: Chart.js
Chart.js — это популярная библиотека диаграмм JavaScript с открытым исходным кодом, которая поддерживает различные типы диаграмм, включая круговые диаграммы. Настраивая параметры диаграммы, мы можем создать круговую диаграмму со значениями по центру.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
canvas {
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ['Work', 'Sleep', 'Study', 'Exercise', 'Socialize'],
datasets: [{
data: [8, 8, 4, 2, 2],
backgroundColor: ['#ff6384', '#36a2eb', '#cc65fe', '#ffce56', '#4bc0c0'],
hoverBackgroundColor: ['#ff6384', '#36a2eb', '#cc65fe', '#ffce56', '#4bc0c0'],
}]
},
options: {
title: {
display: true,
text: 'Daily Activities',
fontSize: 16,
fontColor: 'black'
},
legend: {
display: false
},
tooltips: {
enabled: false
}
}
});
</script>
</body>
</html>Метод 3: D3.js
D3.js — это мощная библиотека JavaScript для создания интерактивных визуализаций данных. Он обеспечивает гибкий и настраиваемый подход к созданию круговых диаграмм, включая размещение значений в центре.
<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
svg {
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<svg id="piechart" width="400" height="400"></svg>
<script>
var data = [
{ label: 'Work', value: 8 },
{ label: 'Sleep', value: 8 },
{ label: 'Study', value: 4 },
{ label: 'Exercise', value: 2 },
{ label: 'Socialize', value: 2 }
];
var width = 400;
var height = 400;
var radius = Math.min(width, height) / 2;
var svg = d3.select('#piechart')
.append('svg')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
var color = d3.scaleOrdinal()
.domain(data.map(function(d) { return d.label; }))
.range(['#ff6384', '#36a2eb', '#cc65fe', '#ffce56', '#4bc0c0']);
var pie = d3.pie()
.value(function(d) { return d.value; });
var path = d3.arc()
.outerRadius(radius - 10)
.innerRadius(0);
var label = d3.arc()
.outerRadius(radius - 40)
.innerRadius(radius - 40);
var arcs = svg.selectAll('arc')
.data(pie(data))
.enter()
.append('g')
.attr('class', 'arc');
arcs.append('path')
.attr('d', path)
.attr('fill', function(d) { return color(d.data.label); });
arcs.append('text')
.attr('transform', function(d) { return 'translate(' + label.centroid(d) + ')'; })
.attr('text-anchor', 'middle')
.text(function(d) { return d.data.value; })
.attr('fill', 'black')
.attr('font-size', 14);
svg.append('text')
.attr('x', 0)
.attr('y', 0)
.attr('text-anchor', 'middle')
.text('Daily Activities')
.attr('fill', 'black')
.attr('font-size', 16);
</script>
</body>
</html>В этой статье мы рассмотрели три различных метода создания круговых диаграмм Google со значениями, отображаемыми в центре. Мы продемонстрировали, как этого добиться с помощью API Google Charts, Chart.js и D3.js. Каждый метод предлагает свои преимущества и возможности настройки, что позволяет вам выбрать тот, который лучше всего соответствует требованиям вашего проекта. Включив эти интерактивные и визуально привлекательные диаграммы в свои веб-приложения, вы сможете эффективно представлять данные и повышать вовлеченность пользователей.