在網頁中，圖表是非常重要的元素之一。因為它可以直觀地表現數據，讓用戶更容易看出規律和趨勢。JavaScript 提供了一些非常方便的 API 來繪制圖表，下面我們就來詳細介紹一下。 首先，我們來看一下最簡單的例子：在 HTML 中加入一個 canvas 元素，然后用 JavaScript 畫一個矩形。

<canvas id="canvas" width="200" height="200"></canvas>

上面的代碼首先通過 document.getElementById('canvas') 獲取了一個 canvas 元素，然后通過 getContext('2d') 方法獲取到了上下文對象，我們可以通過這個上下文對象操作畫布。 ctx.fillStyle 表示填充顏色，我們用 '#ff0000' 表示紅色。然后通過 ctx.fillRect(0, 0, 50, 50) 方法畫了一個寬高為50的紅色矩形。 接下來，我們來畫一下折線圖。同樣地，在 HTML 中加入 canvas 元素。

<canvas id="canvas" width="600" height="400"></canvas>

上面的代碼中，我們定義了一個數組 data，表示每一個點的數值。然后我們使用 moveTo(x, y) 方法將起始點移動到 (50, 350) 的位置，也就是坐標軸的原點。接著，我們使用 for 循環畫了每一個點，使用 lineTo(x, y) 方法將它們連線。最后調用 stroke() 方法將折線畫出來。 最后，我們來畫一張餅圖。在 HTML 中加入 canvas 元素。

<canvas id="canvas" width="400" height="400"></canvas>

上面的代碼中，我們定義了一個數組 data，表示每一塊對應的數據。然后定義了一個顏色數組，表示每一塊對應的顏色。接著，我們計算出總數 total。然后使用 for 循環算出每一塊所占的角度，使用 arc() 方法畫出每一塊餅圖，使用 fill() 方法填充顏色。 以上就是 JavaScript 繪制圖表的三個例子，它們分別是矩形圖、折線圖和餅圖。我們可以使用它們繪制出更多種類的圖表，為用戶提供更多的數據展示方式。