HTML是一種用于創建網站和網絡應用程序的標記語言。我們可以使用HTML開發各種網頁，包括數據可視化頁面。在本文中，我們將學習如何使用HTML創建一個簡單的曲線數據圖。
<!DOCTYPE html>
<html>
<head>
<title>曲線數據圖</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="250"></canvas>
<script>
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
//設置線條樣式
ctx.strokeStyle = "blue";
ctx.lineWidth = 2;
//設置數據點坐標
let dataPoints = [
{ x: 50, y: 50 },
{ x: 100, y: 200 },
{ x: 150, y: 100 },
{ x: 200, y: 150 },
{ x: 250, y: 80 },
{ x: 300, y: 200 },
{ x: 350, y: 70 },
{ x: 400, y: 190 }
];
//繪制曲線
ctx.beginPath();
ctx.moveTo(dataPoints[0].x, dataPoints[0].y);
for (let i = 1; i < dataPoints.length; i++) {
let ctrlPointX = (dataPoints[i-1].x + dataPoints[i].x) / 2;
let ctrlPointY = (dataPoints[i-1].y + dataPoints[i].y) / 2;
ctx.quadraticCurveTo(dataPoints[i-1].x, dataPoints[i-1].y, ctrlPointX, ctrlPointY);
}
ctx.stroke();
</script>
</body>
</html>在代碼中，我們使用了<canvas>元素創建畫布并將其加入到HTML頁面中。接下來，我們將通過JavaScript在畫布上繪制曲線。我們需要設置線條樣式，數據點坐標，并使用貝塞爾曲線繪制曲線。最后，我們將在HTML頁面中顯示該曲線圖。