// codeart.ru / Работаем с кодом / Как сделать круговую диаграмму (Pie Chart) на JavaScript Форум

Как сделать круговую диаграмму (Pie Chart) на JavaScript rss подписка

Автор: Evgeniy Sergeev

В последнее время Интернет становится все более интерактивным и приближается к десктопным приложениям. Браузеры получают все больше и больше новых возможностей. С появлением HTML5 стало возможно использовать графические примитивы. Возможности, которые получили разработчики, действительно огромные и сегодня я расскажу как сделать круговую диаграмму с помощью JavaScript.

Чтобы сделать круговую диаграмму мы будем использовать библиотеку p5.js, которая является JavaScript версией популярного ПО Processing, созданного для изучения программирования посредством визуального искусства.
[social_lock]
Demo:


Code:
HTML страница должна выглядеть следующим образом:

<html>
<head>
<meta charset="UTF-8">
<script language="javascript" type="text/javascript" src="libraries/p5.js"></script>
<script language="javascript" type="text/javascript" src="sketch_170703d.js"></script>

<style> body {padding: 0; margin: 0;} </style>
</head>

<body>

<div id="p5container"></div>
</body>
</html>

Для создания самой круговой диаграммы нужно использовать следующий код:

var angles = [ 30, 10, 45, 35, 60, 38, 75, 67 ];

function setup() {
var canvas = createCanvas(720, 400);
canvas.parent("p5container");
noStroke();
noLoop(); // Run once and stop
}

function draw() {
background(100);
pieChart(300, angles);
}

function pieChart(diameter, data) {
var lastAngle = 0;
for (var i = 0; i < data.length; i++) {
var gray = map(i, 0, data.length, 0, 255);
fill(gray);
arc(width/2, height/2, diameter, diameter, lastAngle, lastAngle+radians(angles[i]));
lastAngle += radians(angles[i]);
}
}

[/social_lock]

Leave a Reply

« »