Как сделать круговую диаграмму с помощью Google Pie Chart
Делаем красвую динамическую круговую диаграмму с помощью Google Charts, диаграмму легко встроить в свой проект, легко изменять и кастомизировать. Саму лучшее и удобное решение для 99% случаев.
Круговая диаграмма Google Pie Chart
Подключаем библиотеку
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
HTML
<div id="piechart_3d" style="width: 900px; height: 500px;"></div>
Скрипт
google.charts.load("current", { packages: ["corechart"] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Task", "Hours per Day"],
["Work", 11],
["Eat", 2],
["Commute", 2],
["Watch TV", 2],
["Sleep", 7]
]);
var options = {
title: "My Daily Activities",
is3D: true
};
var chart = new google.visualization.PieChart(
document.getElementById("piechart_3d")
);
chart.draw(data, options);
}
Пример круговой диаграммы Google Pie Chart
Кастомный пример круговой диаграммы Google Pie Chart
HTML
<div class="chart_budget" id="chart_budget"></div>
CSS
.chart_budget {
width: 450px;
height: 300px;
margin: 0 auto 20px;
}
JS
// Pie Chart from Google
//https://developers.google.com/chart/interactive/docs/gallery/piechart?hl=ru
// Load the Visualization API and the corechart package.
google.charts.load("current", { packages: ["corechart"] });
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn("string", "Topping");
data.addColumn("number", "Slices");
data.addRows([
["Bills", 29],
["Debts", 25],
["Budgets", 21],
["Savings", 14],
["In My Pocket", 11]
]);
// Set chart options
var options = {
// 'title': 'How Much Pizza I Ate Last Night',
// 'width': 450,
// 'height': 300,
pieHole: 0.4,
pieStartAngle: 330,
chartArea: {
left: 0,
top: 0,
width: "100%",
height: "100%"
},
slices: {
0: { color: "#FFA853" },
1: { color: "#FFD65E" },
2: { color: "#B19EFF" },
3: { color: "#82BCFF" },
4: { color: "#0BF0D5" }
},
legend: {
position: "right",
alignment: "center",
textStyle: {
color: "#131A1D",
fontSize: 16
}
},
pieSliceTextStyle: {
color: "#fff",
fontSize: 16
}
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(
document.getElementById("chart_budget")
);
chart.draw(data, options);
}
Рабочий пример кастомной диаграммы в формате Пирога
Вы можете создать круговую диаграмму в HTML, используя простую функцию CSS под названием conic-gradient. Во-первых, мы добавляем <div> элемент…
Выводим число, например, подсчет голосов, или рассчет процентов после выполнения какого-либо действия. Можно выводить все…
Итак, задача такая — проверить отображение каких-то элементов на разных разрешениях экрана. Но современная проблема…
Простая задача — если слайд всего один, то не отображать slick dots, чтобы слайдер выглядел…