Коли є багато даних часто виникає потреба відобразити їх за допомогою графіка.
Побудуємо графік даних за допомогою JavaScript і HTML5, а саме елемента canvas.
Лінійний графік:
Ліній графік представляє собою точки на полотні об'єднані лінією.
Реалізовується лінійних графік на полотні за допомогою методів moveTo() і lineTo().
var canvas=document.getElementById('canvas1'), ctx=canvas.getContext('2d'), dani=[189, 60, 50, 160, 140,200];
var max,x,w,h,kw,kh;
max=Math.max(...dani); //максимальне значення
x=5; //координата x з якої починати малювати графік
w=canvas.width-x; //ширина на яку малювати графік
h=canvas.height-5; //висота на яку малювати графік
kw=w/dani.length;
kh=h/max;
//замальовуємо канву
ctx.fillStyle='white';
ctx.fillRect(0,0,canvas.width,canvas.height);
//малюємо лінії
ctx.beginPath();
ctx.moveTo(x,dani[0]*kh);
for(var i=1;i<dani.length;i++){
ctx.lineTo(x+i*kw, dani[i]*kh);
}
ctx.stroke();
Лінійний графік з точками:
var canvas=document.getElementById('canvas1'), ctx=canvas.getContext('2d'), dani=[189, 60, 50, 160, 140,200];
var max,x,w,h,d,kw,kh;
max=Math.max(...dani); //максимальне значення
x=5; //координата x з якої починати малювати графік
w=canvas.width-x; //ширина на яку малювати графік
h=canvas.height-5; //висота на яку малювати графік
kw=w/dani.length;
kh=h/max;
//замальовуємо канву
ctx.fillStyle='white';
ctx.fillRect(0,0,canvas.width,canvas.height);
//малюємо лінії
ctx.beginPath();
ctx.moveTo(x,dani[0]*kh);
for(var i=1;i<dani.length;i++){
ctx.lineTo(x+i*kw, dani[i]*kh);
}
ctx.stroke();
d=3; // діаметр точки
//малюємо точки
ctx.fillStyle='black';
for(var i=0;i<dani.length;i++){
ctx.beginPath();
ctx.arc(x+i*kw, dani[i]*kh, d, 0, 2*Math.PI);
ctx.fill();
}
Стовпчиковий графік
Стовпчиковий графік представляє собою вертикальні прямокутні стовпчики.
Реалізувати на полотні потрібно за допомогою метода fillRect().
var canvas=document.getElementById('canvas2'), ctx=canvas.getContext('2d');
var max, x, w,h, stepX, stepY, dani=[89, 167, 45, 154, 98, 15];
//очистка полотна
ctx.fillStyle='white';
ctx.fillRect(0,0,canvas.width,canvas.height);
//обчислює необхідні дані
max=Math.max(...dani);
x=0;
w=canvas.width-dani.length; //ширина графіку. Віднімаємо кількість даних так відступ між стовпчиком 1 піксель
h=canvas.height; //висота графіка
stepY=(h-10)/max;
stepX=w/dani.length;
//колір стовпчика
ctx.fillStyle='#9d1b25';
//малюємо стовпчики
for(var i=0, h2;i<dani.length;i++){
h2=h-(dani[i]*stepY);
ctx.fillRect(x,h2,stepX,h-h2);
x+=stepX+1; // збільшуємо координати наступного стовпчика і додаємо 1 пікель відступу
}
Стрічковий графік
Стрічковий графік це подібний до стовпчикового але стовпці розміщуються горизонтально.
var canvas=document.getElementById('canvas3'), ctx=canvas.getContext('2d');
var max, dani=[25,76,16, 89, 105, 98,65];
//очистка полотна
ctx.fillStyle='#ffffdd';
ctx.fillRect(0,0,canvas.width,canvas.height);
//обчислюємо необхідні дані
max=Math.max(...dani);
var y=0, w=canvas.width, h=canvas.height, stepX=w/max, stepY=Math.trunc(h/dani.length);
console.log(max,h,stepX,stepY);
//колір стовпця
ctx.fillStyle='blue';
//малюємо графік
for(var i=0,len=dani.length,w2;i<len;i++){
w2=(dani[i]*stepX);
ctx.fillRect(0,y,w2,stepY);
console.log(0,y,w2,stepY);
y+=stepY+1; //збільшуємо координати наступного стовпця(рядка) і додаємо відступ 1 пікель
}
Щоб зберегти графік (отримати зображення з елемента canvas) використовуйте метод canvas.toDataURL().
location.href=document.getElementById('canvas1').toDataURL();