HTML5 編寫折線圖的代碼
HTML5 是一個新的 HTML 標準，它為開發者提供了更多的工具和功能。其中，用 HTML5 編寫折線圖是一項非常實用的技能。我們可以使用很多 JavaScript 庫來實現和繪制折線圖。以下是一個使用 D3.js 庫實現折線圖的代碼：
<html>
<head>
<script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
// 創建折線圖
var data = [
{ x: 1, y: 5 },
{ x: 2, y: 10 },
{ x: 3, y: 15 },
{ x: 4, y: 8 },
{ x: 5, y: 3 }
];
var margin = { top: 20, right: 20, bottom: 30, left: 50 };
var width = 600 - margin.left - margin.right;
var height = 400 - margin.top - margin.bottom;
var svg = d3.select("#chart")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
var x = d3.scaleLinear()
.domain([1, 5])
.range([0, width]);
var y = d3.scaleLinear()
.domain([0, 15])
.range([height, 0]);
var line = d3.line()
.x(function(d) { return x(d.x); })
.y(function(d) { return y(d.y); });
svg.append("path")
.data([data])
.attr("class", "line")
.attr("d", line);
// 添加坐標軸
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
svg.append("g")
.call(d3.axisLeft(y));
</script>
</body>
</html>以上代碼的注釋已經解釋了每一段的作用，讓我們簡單的概括一下。 首先，我們需要創建一個 svg 容器、折線圖數據和一個 D3.js 庫中的線條生成器 line。其次，要進行一些比例尺的轉換。 然后，將數據綁定到路徑上，選擇一個顏色并繪制路徑。 最后，添加一個坐標軸使圖表容易閱讀。
如你所見，用 HTML5 編寫折線圖的代碼不難！只要理解每一行代碼的作用，就能輕松地創建圖表。