HTML Canvas
- صفحه قبلی JS تصاویر
- صفحه بعدی JS Plotly.js
HTML Canvas بسیار مناسب استنقشه‌های پراکنش（Scatter Plots）.
HTML Canvas بسیار مناسب استخطوط منحنی（Line Graphs）.
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();
}
// Plot Line
ctx.moveTo(0, intercept);
ctx.lineTo(xMax, f(xMax));
ctx.strokeStyle = "black";
ctx.stroke();
// توابع خطی
function f(x) {
return x * slope + intercept;
}
- صفحه قبلی JS تصاویر
- صفحه بعدی JS Plotly.js
