canvas js 绘图插件_Canvas专题—绘制柱状图(2)
目标:在我们了解过前两章节的知识点以后,为了把知识点进行连结,拓展,现在我们做一个图表吧。
看一个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函数进行比例的改变,通过自己绘画,加强自己对绘制柱状图业务模型的了解。
在下一章节中我们开始绘制动态屏保,不例外也用到本章与之前的知识点。
canvas js 绘图插件_Canvas专题—绘制柱状图(2)相关推荐
- canvas js 绘图插件_快速入门前端图表插件Echart
在前端项目开发中,有很多地方会遇到绘制图表的需求,一般的图表可以通过canvas来绘制,但是遇到复杂一点的图表怎么办呢? 而且黑马的课程大纲已经把canvas课程删掉了,既然canvas有用,为什么要 ...
- canvas js 绘图插件_[开盖即食]小程序图表插件eCharts实战
H5时代用来做图表的插件有很多比如:ECharts.Bizcharts.JSCharts等,而这次的小程序本人选用了 ECharts 作为图表组件. 1.选择原因主要有3点: 官方某度在持续维护这个插 ...
- 带着canvas去流浪系列之一:绘制柱状图
[摘要] 学习使用canvasAPI来实现数据可视化. 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制柱 ...
- python canvas画移动物体_canvas中绘制的图像怎么让它移动?
一定要用canvas吗? 如果一定要用canvas,可以和大多交互性的原始画布一样,使用一个渲染循环(rendering loop),例如使用requestAnimationFrame,里面根据条件对 ...
- canvas贝塞尔曲线爱心_Canvas中绘制贝塞尔曲线
① 什么是贝塞尔曲线? 在数学的数值分析领域中,贝济埃曲线(英语:Bézier curve,亦作"贝塞尔")是计算机图形学中相当重要的参数曲线.更高维度的广泛化贝济埃曲线就称作贝济 ...
- R语言绘制柱状图(bar plot)
柱状图是在数据可视化过程中最为常见的图片形式之一,本文将借助R语言中的ggplot2这个包绘制常用的柱状图.在ggplot2包中主要是使用geom_bar()这个函数来绘制柱状图.该函数主要包括以下5 ...
- python 画柱状图-python使用Plotly绘图工具绘制柱状图
本文实例为大家分享了python使用Plotly绘图工具绘制柱状图的具体代码,供大家参考,具体内容如下 使用Plotly绘制基本的柱状图,需要用到的函数是graph_objs 中 Bar函数 通过参数 ...
- 成功解决采用ax.bar进行三维绘图绘制柱状图的时候,横坐标只显示三列而不是数据中的四列
成功解决采用ax.bar进行三维绘图绘制柱状图的时候,横坐标只显示三列而不是数据中的四列 目录 解决问题 解决思路 解决方法 解决问题 输入数据为四列五行,如下所示: labelX_lists02= ...
- html5绘制随机五角星_HTML5 canvas基本绘图之绘制五角星
是HTML5中新增的标签,用于绘制图形,实际上,这个标签和其他的标签一样,其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象,我们可以通过JavaScript脚本来控 ...
最新文章
- 菏泽中考报名不报计算机,2020菏泽中考报名人数:94559人
- IPC经典入侵,比3389实用(图)
- 从程序员角度看ELF
- Android官方开发文档Training系列课程中文版:通过NFC共享文件之从其它设备接收文件
- 360怎么看电脑配置_怎么样查看电脑配置?5种方法查看电脑硬件配置好坏图文详解...
- 【转】WPF/Silverlight开发的15个最佳实践
- c语言love字符怎么打,love字母特殊符号
- arp表老化时间及其修改
- 功率是电压电流乘积的波形在一个周期内积分后除以周期。
- 需求预测——Gallat: A Spatiotemporal Graph Attention Network for Passenger Demand Prediction
- win10 uwp 应用转后台清理内存
- 英文版的pdf文件怎么翻译成中文-免费的自动翻译器
- qt中文乱码原因分析及解决方案
- 给孩子简单快乐的童年
- 【重温SSM框架系列】1 - Spring快速入门(配置文件及API详解)
- STM32串口通信代码正确串口却没反应
- 桑拿lt是什么意思_lt是什么意思
- GCC最新版安装及错误解决
- 计算机操作系统分页试题,计算机操作系统典型例题解析之二
- 气体动理论的定律及定理
热门文章
- ruby .each_Ruby中带有示例的Array.each方法
- 两个矩阵相乘的乘法次数_C ++程序将两个数字相乘而不使用乘法运算符
- 漫话:应用程序被拖慢?罪魁祸首竟然是Log4j!
- 经典面试题:聊一聊垃圾回收算法
- memoryTraining记忆训练小游戏
- docker安装nginx并配置SSL到个人博客
- SpringBoot执行器端点Actuator Endpoint
- python提示对话框自动关闭_Python实现定时自动关闭的tkinter窗口方法
- python random函数_详细代码实战讲解:如何用 Python让自己变成天选之子
- dell服务器r730安装esxi系统,安装Esxi系统重装Esxi系统