如何使用JavaScript和HTML5画布绘制条形图

柔情只为你懂 2023-10-05 14:24 7阅读 0赞

在本教程中，我将向您展示如何使用JavaScript和HTML5画布作为使用条形图以图形方式显示数据的方法。

比起从头开始编写图表，使用现成的图表库更简便。但是，如果您想知道创建这样的库需要什么，本教程适合您。

### **什么是条形图？** ###

条形图是用于表示数字数据的非常常用的工具。从财务报告到PowerPoint演示文稿再到信息图表，条形图非常常用，因为它们提供了易于理解的数字数据视图。

条形图使用条形图表示数字数据，条形图是宽度或高度与它们表示的数字数据成比例的矩形。

条形图有很多类型：

*  水平和垂直条形图，具体取决于图表方向
 *  堆叠的条形图或经典条形图，用于表示多个数据系列
 *  2D或3D条形图
 *  等等

### **条形图的组成部分是什么？** ###

让我们看一下构成条形图的各种类型的组件：

![条形图的组成][24cbc353b9397482b4b97508e5732630.png]

*  图表数据：这些是由图表表示的数字集和相关类别。
 *  数据系列的名称（1）。
 *  图表网格（2）：提供参考系统，以便可以轻松理解视觉表示。
 *  条（3）：彩色矩形，尺寸与所表示的数据成比例。
 *  图表图例（4）：显示所用颜色与其代表的数据之间的对应关系。

现在，我们知道条形图的组成，让我们看看如何编写JavaScript代码以绘制这样的图表。

### **使用JavaScript绘制条形图** ###

#### **设置JS项目** ####

要开始使用JavaScript和HTML5画布进行绘制，我们需要像这样设置我们的项目：

*  创建一个文件夹来保存项目文件；我们叫这个文件夹 `bar-chart-tutorial`。
 *  在项目文件夹中，创建一个文件并调用它 `index.html`。这将包含我们的HTML代码。
 *  同样在项目文件夹中，创建一个文件并调用它 `script.js`。这将包含用于绘制条形图的JavaScript代码。

我们将使事情变得非常简单，并在其中添加以下代码 `index.html`：

我们具有`<canvas>` 带有ID的 元素， `myCanvas` 以便我们可以在我们的JS代码中引用它。然后，我们通过`<script>` 标签加载JS代码 。

在`script.js` 文件中添加以下代码 ：

这将获得对canvas元素的引用，然后将width和height设置为`300px`。要在画布上绘制，我们只需要引用其2D上下文，其中包含所有绘制方法。

#### **添加一些辅助功能** ####

绘制条形图只需要知道如何绘制两个元素：

*  绘制线：用于绘制网格线
 *  绘制一个彩色矩形：用于绘制图表的条形图

让我们为这两个元素创建辅助JS函数。我们将功能添加到 `script.js` 文件中。

该 `drawLine` 函数具有六个参数：

1.  `ctx`：参考图纸上下文
2.  `startX`：线起点的X坐标
3.  `startY`：线起点的Y坐标
4.  `endX`：线终点的X坐标
5.  `endY`：线终点的Y坐标
6.  `color`：线的颜色

我们正在修改的颜色设置`strokeStyle`。这将确定用于绘制线条的颜色。我们使用`ctx.save()`和，`ctx.restore()`这样我们就不会影响此功能之外使用的颜色。

我们通过致电划清界限 `beginPath()`。这通知绘图上下文我们开始在画布上绘制一些新内容。我们用于 `moveTo()` 设置起点，调用 `lineTo()` 以指示终点，然后通过调用进行实际绘制 `stroke()`。

我们需要的另一个辅助函数是绘制条的函数-这是一个彩色矩形。让我们将其添加到 `script.js`：

该 `drawBar` 函数具有六个参数：

1.  `ctx`：参考图纸上下文
2.  `upperLeftCornerX`：栏左上角的X坐标
3.  `upperLeftCornerY`：栏左上角的X坐标
4.  `width`：条的宽度
5.  `height`：栏的高度
6.  `color`：栏的颜色

#### **条形图数据模型** ####

现在我们已经有了辅助功能，让我们继续图表的数据模型。所有类型的图表（包括条形图）背后都有数据模型。数据模型是一组结构化的数字数据。在本教程中，我们将使用一系列数据类别及其关联的数值，这些数值代表我按音乐类型分组的唱片集中的黑胶唱片数量：

*  古典音乐：10
 *  替代摇滚：14
 *  流行音乐：2
 *  爵士乐：12

我们可以用对象形式在JavaScript中表示它。让我们将其添加到我们的 `script.js`文件中：

#### **实施条形图组件** ####

让我们实现将实际绘制条形图的组件。我们将通过在`script.js`文件中添加以下JavaScript对象来实现此目的 ：

该类首先存储 `options` 传递的参数。它存储 `canvas` 参考，并创建一个也作为类成员存储的图形上下文。然后，它存储`colors` 作为选项传递的 数组。

下一部分是最一致的 `draw()` 功能。这将通过首先绘制网格线，网格标记，然后使用通过`options`对象传递的参数绘制条形图来绘制图表 。

查看 `draw()`函数，我们可以看到，首先我们计算出数据模型的最大值。我们需要这个数字，因为我们将需要根据该值和画布的大小缩放所有条形图。否则，我们的栏可能会超出显示区域，因此我们不希望这样做。

的`canvasActualHeight`和`canvasActualWidth` 变量存储在画布的使用经由通过填充的值来调整高度和宽度`options`。该`padding` 变量表示画布边缘和内部图表之间的像素数。

然后，我们绘制图表的网格线。该 `options.gridScale`变量设置用于绘制线条的步骤。所以`gridScale`10的a 表示每10个单位绘制网格线。

要绘制网格线，我们使用helper函数 `drawLine()`；至于网格线的颜色，我们取自 `options.gridColor`变量。请注意，画布坐标从`0,0`左上角开始， 并向右和向底部增加，而我们的网格值从底部到顶部逐渐增加。这就是为什么我们`1 - gridValue/maxValue`在公式中使用 了计算 `gridY`值的原因。

对于每条网格线，我们还在网格线上方2个像素处绘制网格线的值（这就是为什么`gridY - 2` 要使用文本的Y坐标的原因 ）。

接下来，我们通过使用辅助函数来绘制条形图 `drawBar()`。计算每个条形的高度和宽度的数学方法非常简单。它考虑了图表数据模型中每个类别的填充以及值和颜色。

#### **使用条形图组件** ####

现在让我们看看如何使用`Barchart`上面实现的 类。我们需要实例化该类并调用该`draw()`函数。将以下代码添加到 `script.js`文件中：

该代码`Barchart`使用所需的选项创建该类的新实例 。`index.html`在浏览器中加载会 产生如下结果：

![使用html5 canvas的简单条形图][html5 canvas]

#### **添加数据系列名称和图表图例** ####

要在图表下方添加数据系列名称，我们需要在绘制条形图`script.js`之后的文件中 添加以下代码 `for-loop`：

我们还需要`Barchart` 像下面这样更改调用组件的方式：

结果是这样的：

![带有数据系列标题的条形图][3e34d9f8fe4dff47e6086ba5b7c08dbd.png]

要添加图例，我们首先需要修改 `index.html`为如下所示：

该 `legend`标记将用作图表图例的占位符。该 `for`属性将图例链接到保存图表的画布。现在，我们需要添加创建图例的代码。我们将在`index.js`绘制数据系列名称的代码之后的文件中执行此操作 。该代码标识了`legend`与图表相对应的标签，并将添加来自图表数据模型的类别列表以及相应的颜色。生成的`index.js`文件将如下所示：

<table> 
 <tbody> 
  <tr> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">001</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">002</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">003</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">004</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">005</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">006</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">007</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">008</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">009</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">010</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">011</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">012</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">013</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">014</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">015</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">016</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">017</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">018</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">019</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">020</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">021</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">022</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">023</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">024</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">025</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">026</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">027</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">028</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">029</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">030</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">031</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">032</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">033</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">034</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">035</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">036</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">037</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">038</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">039</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">040</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">041</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">042</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">043</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">044</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">045</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">046</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">047</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">048</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">049</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">050</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">051</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">052</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">053</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">054</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">055</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">056</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">057</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">058</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">059</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">060</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">061</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">062</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">063</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">064</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">065</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">066</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">067</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">068</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">069</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">070</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">071</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">072</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">073</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">074</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">075</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">076</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">077</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">078</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">079</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">080</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">081</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">082</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">083</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">084</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">085</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">086</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">087</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">088</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">089</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">090</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">091</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">092</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">093</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">094</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">095</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">096</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">097</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">098</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">099</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">100</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">101</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">102</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">103</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">104</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">105</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">106</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">107</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">108</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">109</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">110</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">111</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">112</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">113</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">114</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">115</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">116</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">117</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">118</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">119</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">120</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">121</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">122</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">123</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">124</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">125</span></span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#3a3a3a;"><span style="color:#afafaf;">126</span></span> 
    </div> </td> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>var</code> <code>myCanvas = document.getElementById(</code><code>"myCanvas"</code><code>);</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>myCanvas.width = 300;</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>myCanvas.height = 300;</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;</code>&nbsp;</span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>var</code> <code>ctx = myCanvas.getContext(</code><code>"2d"</code><code>);</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;">&nbsp;</span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>function</code> <code>drawLine(ctx, startX, startY, endX, endY,color){ </code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>ctx.save();</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>ctx.strokeStyle = color;</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>ctx.beginPath();</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>ctx.moveTo(startX,startY);</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>ctx.lineTo(endX,endY);</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>ctx.stroke();</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>ctx.restore();</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>}</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;">&nbsp;</span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>function</code> <code>drawBar(ctx, upperLeftCornerX, upperLeftCornerY, width, height,color){ </code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>ctx.save();</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>ctx.fillStyle=color;</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>ctx.fillRect(upperLeftCornerX,upperLeftCornerY,width,height);</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>ctx.restore();</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>}</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;">&nbsp;</span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>var</code> <code>myVinyls = { </code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"Classical music"</code><code>: 10,</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"Alternative rock"</code><code>: 14,</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"Pop"</code><code>: 2,</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"Jazz"</code><code>: 12</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>};</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;">&nbsp;</span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>var</code> <code>Barchart = </code><code>function</code><code>(options){ </code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.options = options;</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.canvas = options.canvas;</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.ctx = </code><code>this</code><code>.canvas.getContext(</code><code>"2d"</code><code>);</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.colors = options.colors;</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;</code>&nbsp;</span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.draw = </code><code>function</code><code>(){ </code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>maxValue = 0;</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>for</code> <code>(</code><code>var</code> <code>categ </code><code>in</code> <code>this</code><code>.options.data){ </code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>maxValue = Math.max(maxValue,</code><code>this</code><code>.options.data[categ]);</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>canvasActualHeight = </code><code>this</code><code>.canvas.height - </code><code>this</code><code>.options.padding * 2;</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>canvasActualWidth = </code><code>this</code><code>.canvas.width - </code><code>this</code><code>.options.padding * 2;</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;">&nbsp;</span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//drawing the grid lines</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>gridValue = 0;</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>while</code> <code>(gridValue &lt;= maxValue){ </code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>gridY = canvasActualHeight * (1 - gridValue/maxValue) + </code><code>this</code><code>.options.padding;</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>drawLine(</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.ctx,</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>0,</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>gridY,</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.canvas.width,</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>gridY,</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.options.gridColor</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>);</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//writing grid markers</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.ctx.save();</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.ctx.fillStyle = </code><code>this</code><code>.options.gridColor;</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.ctx.textBaseline=</code><code>"bottom"</code><code>; </code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.ctx.font = </code><code>"bold 10px Arial"</code><code>;</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.ctx.fillText(gridValue, 10,gridY - 2);</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.ctx.restore();</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;">&nbsp;</span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>gridValue+=</code><code>this</code><code>.options.gridScale;</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;</code>&nbsp;</span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//drawing the bars</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>barIndex = 0;</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>numberOfBars = Object.keys(</code><code>this</code><code>.options.data).length;</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>barSize = (canvasActualWidth)/numberOfBars;</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;">&nbsp;</span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>for</code> <code>(categ </code><code>in</code> <code>this</code><code>.options.data){ </code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>val = </code><code>this</code><code>.options.data[categ];</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>barHeight = Math.round( canvasActualHeight * val/maxValue) ;</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>drawBar(</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.ctx,</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.options.padding + barIndex * barSize,</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.canvas.height - barHeight - </code><code>this</code><code>.options.padding,</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>barSize,</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>barHeight,</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.colors[barIndex%</code><code>this</code><code>.colors.length]</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>);</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;">&nbsp;</span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>barIndex++;</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;">&nbsp;</span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//drawing series name</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.ctx.save();</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.ctx.textBaseline=</code><code>"bottom"</code><code>;</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.ctx.textAlign=</code><code>"center"</code><code>;</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.ctx.fillStyle = </code><code>"#000000"</code><code>;</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.ctx.font = </code><code>"bold 14px Arial"</code><code>;</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.ctx.fillText(</code><code>this</code><code>.options.seriesName, </code><code>this</code><code>.canvas.width/2,</code><code>this</code><code>.canvas.height);</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.ctx.restore();&nbsp; </code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//draw legend</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>barIndex = 0;</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>legend = document.querySelector(</code><code>"legend[for='myCanvas']"</code><code>);</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>ul = document.createElement(</code><code>"ul"</code><code>);</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>legend.append(ul);</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>for</code> <code>(categ </code><code>in</code> <code>this</code><code>.options.data){ </code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>li = document.createElement(</code><code>"li"</code><code>);</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>li.style.listStyle = </code><code>"none"</code><code>;</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>li.style.borderLeft = </code><code>"20px solid "</code><code>+</code><code>this</code><code>.colors[barIndex%</code><code>this</code><code>.colors.length];</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>li.style.padding = </code><code>"5px"</code><code>;</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>li.textContent = categ;</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>ul.append(li);</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>barIndex++;</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>}</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;">&nbsp;</span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;">&nbsp;</span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>var</code> <code>myBarchart = </code><code>new</code> <code>Barchart(</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{ </code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>canvas:myCanvas,</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>seriesName:</code><code>"Vinyl records"</code><code>,</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>padding:20,</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>gridScale:5,</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>gridColor:</code><code>"#eeeeee"</code><code>,</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>data:myVinyls,</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>colors:[</code><code>"#a55ca5"</code><code>,</code><code>"#67b6c7"</code><code>, </code><code>"#bccd7a"</code><code>,</code><code>"#eb9743"</code><code>]</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></span> 
     </div> 
     <div style="margin-left:0px;"> 
      <span style="color:#3a3a3a;"><code>);</code></span> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

最终结果将如下所示：

![HTML5画布条形图最终结果][HTML5]

### **恭喜啦** ###

我们已经看到使用HTML5画布绘制图表实际上并不难。它只需要一点数学和一点JavaScript知识。现在，您拥有绘制自己的条形图所需的一切。

[24cbc353b9397482b4b97508e5732630.png]: https://img-blog.csdnimg.cn/img_convert/24cbc353b9397482b4b97508e5732630.png
[html5 canvas]: https://img-blog.csdnimg.cn/img_convert/ea0fef52c45ad00608ef937144114058.png
[3e34d9f8fe4dff47e6086ba5b7c08dbd.png]: https://img-blog.csdnimg.cn/img_convert/3e34d9f8fe4dff47e6086ba5b7c08dbd.png
[HTML5]: https://img-blog.csdnimg.cn/img_convert/17f954fecaf68c2aa200c4a1668bd228.png