HTML Canvas
HTML Canvas ідеально підходить для точкових діаграм
HTML Canvas ідеально підходить для лінійних графіків
HTML Canvas ідеально підходить для поєднання точкових діаграм та лінійних графіків
Точкові діаграми
Вихідний код
const xArray = [50,60,70,80,90,100,110,120,130,140,150];
const yArray = [7,8,8,9,9,9,10,11,14,14,15];
// Точкова діаграма
ctx.fillStyle = "red";
for (let i = 0; i < xArray.length-1; i++) {
let x = xArray[i]*400/150;
let y = yArray[i]*400/15;
ctx.beginPath();
ctx.ellipse(x, y, 2, 3, 0, 0, Math.PI * 2);
ctx.fill();
}
Спробуйте самі »
Лінійні графіки
Вихідний код
let xMax = canvas.height;
let slope = 1.2;
let intercept = 70;
// Точкова діаграма
ctx.moveTo(0, intercept);
ctx.lineTo(xMax, f(xMax));
ctx.strokeStyle = "black";
ctx.stroke();
// Лінійна функція
function f(x) {
return x * slope + intercept;
}
Спробуйте самі »
Комбіновані графіки
Вихідний код
let xMax = canvas.height;
let yMax = canvas.width;
let slope = 1.2;
let intercept = 70;
const xArray = [50,60,70,80,90,100,110,120,130,140,150];
const yArray = [7,8,8,9,9,9,10,11,14,14,15];
// Точкова діаграма
ctx.fillStyle = "red";
for (let i = 0; i < xArray.length-1; i++) {
let x = xArray[i]*400/150;
let y = yArray[i]*400/15;
ctx.beginPath();
ctx.ellipse(x, y, 2, 3, 0, 0, Math.PI * 2);
ctx.fill();
}
// Лінійна діаграма
ctx.moveTo(0, intercept);
ctx.lineTo(xMax, f(xMax));
ctx.strokeStyle = "black";
ctx.stroke();
// Лінійна функція
function f(x) {
return x * slope + intercept;
}
Спробуйте самі »
