canvas js 绘图插件_Canvas专题—绘制柱状图（2）

最新推荐文章于 2023-03-06 14:04:44 发布

weixin_39948309

最新推荐文章于 2023-03-06 14:04:44 发布

阅读量208

点赞数

文章标签： canvas js 绘图插件

目标：在我们了解过前两章节的知识点以后，为了把知识点进行连结，拓展，现在我们做一个图表吧。

看一个echartst图表

当今Canvas库有很多供我们选择，比如，echarts在很大程度上能够提高我们的工作效率，但是也存在着一些问题：

从业务覆盖度出发，echarts库能提供很多模板，但是我们只需要其中的一种或者几种就够了，显然造成了资源的浪费；
如果业务需求变更，改进，那么依靠图表库，肯定是不能满足业务的，失去了灵活性。

这就是我们用Canvas打造自己图表的原因。

分析图表

让我们先看一下目标图表的外观

如图所示，此图表由坐标轴X，Y，描述数字，文字，填充矩形，辅助线构成。另外我们按比例计算坐标，增强复用性。

准备工作

让我们先在一个文件夹内建立2个文件夹，一个chart.html文件.：css文件夹，存放样式；js文件夹，存放js代码；html文件是程序入口文件，然后在chart.html文件中引入css，js文件夹中的对应文件。

我们在chart.html中写一个div标签来作为存放Canvas的容器。

<!DOCTYPE html>

js文件准备

'use strict'

从chart.js文件开始

现在让我们用面向对象的方式将它用Canvas画出来。用面向对象的好处就是页面有多个图表的时候我们调用函数，传入所需的参数，放到容器通常div中即可。

模拟来自后台的数据

var

这里我们在chart.js文件中写入了data数组，是模拟后台传给我们的数据，画图基于此。其中用到了getRandomInt函数：

/*

接着我们再定义一下所需要的变量

var

定义所必需的变量

现在我们有了全局变量data，targetId，cw，ch。这些是我们准备画Canvas的必要参数。

图表功能函数

我们现在准备一个Bcharts构造函数：

function

this在函数内，指向调用函数的对象。configureChart，配置图表函数，init初始化函数包含了：

createCanvas函数创建Canvas元素，并插入到div中，通过getContext('2d')得到绘图上下文；
handleData函数获取来自后台的数据x，y轴上的数据；
prepareData函数对数据进行处理，按比例计算，分配x，y轴坐标的位置。；
draw函数绘制图表所有元素；

创建Canvas元素

通过createCanvas函数创建Canvas。

Bcharts

设置Canvas参数

通过setCanvasParameters对Canvas必需的参数赋值到chart属性。

Bcharts

设置图表比例

通过setChartParameters函数配置：x，y，文字，展示的比例。比例10,6可以根据ui需要自行更改。

Bcharts

配置图表

通过configureChart函数整合画布，图表比例的配置。

Bcharts

初始化

定义init函数到Bcharts原型上，内部调用如下方法：

Bcharts

提取模拟数据

其实我们在拿到后台的数据后，需要提取我们所需要的数据，比如label，value，具体还要根据后端提供的数据进行提取，整理

Bcharts

整理数据

用prepareData函数整理我们的数据，需要了解

Math.max.apply(null,[arg1,arg2,arg3]);

两个参数：

null参数不改变this指向；
[arg1,arg2,arg3]应用Math.max方法的对象，在prepareData函数内我们chart.values为数组，故求出最大值

Bcharts

画函数

在这里让我们将draw函数进行细化,正如我们在开头分析图表中分析图表构成的元素。

细化后的函数职责单一，方便调试，更改，更加清晰。如下所示：

Bcharts

1.画x轴

通过drawX函数画x轴：

Bcharts

其中坐标依赖我们setChartParameters函数设置的比例,也就是说图表坐标0就是moveTo(60,405)，画笔开始的点

lineTo(540,405),x轴上，y轴值肯定是不变的，所以画布宽度-比例的留白就是图表x轴的终点。接下来我们给定线宽，stroke()，就好了。

2.画y轴

通过drawY函数画y轴:

Bcharts

3.画x轴描述文字

通过drawXLabel函数画出x轴描述文字（一，二，三月...）:

Bcharts

4.画y轴数值

通过drawYLabel函数画y轴，如上同理：

Bcharts

5.画水平辅助线

通过HorGuideLines函数画x轴辅助线：

Bcharts

6.画垂直辅助线

通过verGuideLines画垂直辅助线同理：

Bcharts

7.准备填充矩形随机填充色

Bcharts

8.画矩形

通过drawBars绘制矩形

Bcharts

9.调用Bcharts

var

new在此时做了两件事情：

创建了一个新的Bcharts对象；
返回了一个新的Bcharts对象。

我们将返回的新的Bcharts通过var引用到chart。

打印chart我们将得到：

所以chart共享Bcharts所有属性，方法。

思考行动

我们从分析图表的构成：

x轴；
y轴；
辅助线；
矩形。

然后还有看不见的数据处理与准备，最重要的我们根据比例多次依赖setChartParameters函数，一步一步将图表完成。

比较难些的有两个地方：

整理数据；
setChartParameters函数对于图表比例的设计。

希望大家能够对setChartParameters函数进行比例的改变，通过自己绘画，加强自己对绘制柱状图业务模型的了解。

在下一章节中我们开始绘制动态屏保，不例外也用到本章与之前的知识点。