在网页中，图表是非常重要的元素之一。因为它可以直观地表现数据，让用户更容易看出规律和趋势。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 绘制图表的三个例子，它们分别是矩形图、折线图和饼图。我们可以使用它们绘制出更多种类的图表，为用户提供更多的数据展示方式。