Как нарисовать диаграмму на Canvas?

@velma 

Для отображения диаграммы на Canvas необходимо использовать контекст рисования (context) и отрисовать графические фигуры, соответствующие элементам диаграммы.

1. Создайте Canvas элемент в HTML документе:

1

1. Получите контекст рисования:

1
2

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

1. Отрисуйте фигуры, соответствующие элементам диаграммы. Например, для круговой диаграммы вы можете использовать функции arc и fill:

1
2
3
4
5
6
7
8

var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 100;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'red';
context.fill();

При этом вы можете изменять параметры фигур в зависимости от данных, которые необходимо отобразить в диаграмме. Например, если нужно нарисовать сектора разной ширины, можно изменить угол startAngle и endAngle при вызове функции arc.