12-es6类的方式封装折线图
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>12-Canvas折线图封装</title>
6 <!---->
7 <style>
8 *{
9 margin: 0;
10 padding: 0;
11 }
12 canvas{
13 display: block;
14 margin: 0 auto;
15 background: red;
16 }
17 </style>
18 </head>
19 <body>
20 <script>
21 /*
22 面向过程: 亲力亲为
23 面向对象: 找对象, 让对象做事情
24 找一个折线图对象, 你给我画格子, 你给我画坐标系, 你给我画数据点, 你给我画折线
25 * */
26 class LineChart{
27 constructor(width=300, height=150){
28 // 1.创建canvas
29 this.canvas = document.createElement("canvas");
30 this.canvas.width = width;
31 this.canvas.height = height;
32 document.body.appendChild(this.canvas);
33 // 2.拿到绘图工具
34 this.ctx = this.canvas.getContext("2d");
35 }
36 drawGrid(gridSize=20){
37 let oCtx = this.ctx;
38 // 4.拿到canvas的宽高
39 let canvasWidth = oCtx.canvas.width;
40 let canvasHeight = oCtx.canvas.height;
41 // 5.计算在垂直方向和水平方向可以绘制多少条横线
42 let row = Math.floor(canvasHeight / gridSize);
43 let col = Math.floor(canvasWidth / gridSize);
44 // 6.绘制垂直方向的横线
45 for(let i = 0; i < row; i++){
46 oCtx.beginPath();
47 oCtx.moveTo(0, i * gridSize - 0.5);
48 oCtx.lineTo(canvasWidth, i * gridSize - 0.5);
49 oCtx.strokeStyle = "#ccc";
50 oCtx.stroke();
51 }
52 // 7.绘制水平方向的横线
53 for(let i = 0; i < col; i++){
54 oCtx.beginPath();
55 oCtx.moveTo(i * gridSize - 0.5, 0);
56 oCtx.lineTo(i * gridSize - 0.5, canvasHeight);
57 oCtx.strokeStyle = "#ccc";
58 oCtx.stroke();
59 }
60 }
61 drawCoor(gridSize=20){
62 let oCtx = this.ctx;
63 let canvasWidth = this.ctx.canvas.width;
64 let canvasHeight = this.ctx.canvas.height;
65
66 // 1.计算坐标系原点的位置
67 let originX = gridSize;
68 let originY = canvasHeight - gridSize;
69 // 2.计算X轴终点的位置
70 let endX = canvasWidth - gridSize;
71 // 3.绘制X轴
72 oCtx.beginPath();
73 oCtx.moveTo(originX, originY);
74 oCtx.lineTo(endX, originY);
75 oCtx.strokeStyle = "#000";
76 oCtx.stroke();
77 // 4.绘制X轴的箭头
78 oCtx.lineTo(endX - 10, originY + 5);
79 oCtx.lineTo(endX - 10, originY - 5);
80 oCtx.lineTo(endX, originY);
81 oCtx.fill();
82
83 // 5.计算Y轴终点的位置
84 let endY = gridSize;
85 // 3.绘制Y轴
86 oCtx.beginPath();
87 oCtx.moveTo(originX, originY);
88 oCtx.lineTo(originX, endY);
89 oCtx.strokeStyle = "#000";
90 oCtx.stroke();
91 // 4.绘制X轴的箭头
92 oCtx.lineTo(originX - 5, endY + 10);
93 oCtx.lineTo(originX + 5, endY + 10);
94 oCtx.lineTo(originX, endY);
95 oCtx.fill();
96 }
97 drawDot(list, dotSize=10){
98 let oCtx = this.ctx;
99 // 2.绘制数据点
100 for(let i = 0; i < list.length; i++){
101 oCtx.beginPath();
102 oCtx.moveTo(list[i].x - dotSize / 2, list[i].y - dotSize / 2);
103 oCtx.lineTo(list[i].x + dotSize - dotSize / 2, list[i].y - dotSize / 2);
104 oCtx.lineTo(list[i].x + dotSize - dotSize / 2, list[i].y + dotSize - dotSize / 2);
105 oCtx.lineTo(list[i].x - dotSize / 2, list[i].y + dotSize - dotSize / 2);
106 oCtx.closePath();
107 oCtx.fill();
108 }
109 }
110 drawLine(list){
111 let oCtx = this.ctx;
112 oCtx.beginPath();
113 for(let i = 0; i < list.length; i++){
114 if(i === 0){
115 oCtx.moveTo(list[i].x, list[i].y);
116 }else{
117 oCtx.lineTo(list[i].x, list[i].y);
118 }
119 }
120 oCtx.stroke();
121 }
122 }
123
124 let list = [
125 {
126 x: 100,
127 y: 300
128 },
129 {
130 x: 200,
131 y: 200
132 },
133 {
134 x: 300,
135 y: 250
136 },
137 {
138 x: 400,
139 y: 100
140 },
141 ];
142 let lineChart = new LineChart(500, 400);
143 lineChart.drawGrid(50);
144 lineChart.drawCoor(50);
145 lineChart.drawDot(list);
146 lineChart.drawLine(list);
147 </script>
148 </body>
149 </html>
12-es6类的方式封装折线图的更多相关文章
- iOS 动画绘制线条颜色渐变的折线图
效果图 .................... 概述 现状 折线图的应用比较广泛,为了增强用户体验,很多应用中都嵌入了折线图.折线图可以更加直观的表示数据的变化.网络上有很多绘制折线图的demo,有 ...
- 利用JFreeChart生成折线图 (4) (转自 JSP开发技术大全)
利用JFreeChart生成折线图 (4) (转自 JSP开发技术大全) 14.4 利用JFreeChart生成折线图 通过JFreeChart插件,既可以生成普通效果的折线图,也可以生成3D效果的折 ...
- JFreeChart绘制XY折线图（工具类设计）
准备用Java写通信的仿真平台作为毕业设计,相比matlab绘图,Java绘图需要自己去写很多工具类,博主在这采用了JFreeChart的开源解决方案,摸索着自己写了一个XY折线图工具类,话不多说贴源 ...
- echars画折线图的一种数据处理方式
echars画折线图的一种数据处理方式 <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...
- 封装的通过微信JS-SDK实现自定义分享到朋友圈或者朋友的ES6类！
引言: 我们经常在做微信H5的过程中需要自定义分享网页,这个如何实现呢?请看如下的封装的ES6类及使用说明! /** * @jssdk js对象,包括appId,timestamp,nonceStr, ...
- echarts 拼图和折线图的封装 及常规处理
1.html <div id="wrap"></div> 2.js ; (function ($) { $.fn.extend({ echartsPie: ...
- php 生成饼状图，折线图，条形图 通用类 2
生成饼状图,折线图,条形图通用的php类,这里使用的是国外的 HighCharts,前台页面别忘了调用HighCahrt js HighCharts中文网站 http://www.hcharts. ...
- php 生成饼状图，折线图，条形图 通用类
生成饼状图,折线图,条形图通用的php类,这里使用的是百度 Echart. Echart 官方网站 http://echarts.baidu.com/ <?php class Echarts ...
- Echarts 折线图Demo调色12种，可以直接使用~~~
测试Demo代码~~ <template> <div> <div id="myChart" ref="mapBox" style= ...
- Android自定义折线图
老师布置了个作业:http://www.cnblogs.com/qingxu/p/5316897.html 作业中提到的 “玩了几天以后,大家发现了一些很有意思的现象,比如黄金点在逐渐地往下移动.” ...
随机推荐
- iOS11之后刷新tableview会出现漂移的现象解决办法
首先要注意这只是在iOS11下会出现的bug,如果iOS10以及以下也有问题的情况不属于此列 问题的动图如下所示,如果要做每隔一段短时间就刷新一个section甚至整个tableview的操作的时候会 ...
- 浮点数格式：FP64, FP32, FP16, BFLOAT16, TF32之间的相互区别
浮点数格式 (参考1,参考2) 浮点数是一种用二进制表示的实数,它由三个部分组成:sign(符号位).exponent(指数位)和fraction(小数位).不同的浮点数格式有不同的位数分配给这三个部 ...
- cv2 判断图片是冷还是暖
把图片的颜色空间转为HSV H表示色调(下图横轴), 图片的平均H值可用于区分冷暖
- 配置hive环境步骤（zookeeper高可用集群已搭建）
安装mysql:1. 检查当前环境是否安装mysql服务(命令:rpm -qa | grep -i mysql)2. 卸载自带的mysql3. 卸载软件:rpm -e --nodeps mysql-l ...
- 单qubit量子门
量子编程的基本单元就是量子门.量子编程有点像传统的电路设计,一个量子程序可以被写成量子门序列. 图中有一些符合,比如H门.X门.Z门.测量等,我们都会接触到. 传统计算机程序的输入和输出可以不一样,但 ...
- 2023年台州市初赛Misc
2023年台州市初赛Misc 这是神马 冰蝎流量,找到key <?php @error_reporting(0); session_start(); $key="144a6b22963 ...
- MyBatis学习篇
什么是MyBatis (1)Mybatis是一个半ORM(对象关系映射)框架,它内部封装了JDBC,开发时只需要关注SQL语句本身,不需要花费精力去处理加载驱动.创建连接.创建statement等繁杂 ...
- mac idea 配置Tomcat
官网下载Tomcat 下载地址:点我直达 配置Idea 设置Application Servers 操作步骤:Intellij IDEA->Preferences->Application ...
- MySQL ibdata1文件太大的解决办法
在MySQL数据库中,如果不指定innodb_file_per_table=1参数单独保存每个表的数据,MySQL的数据都会存放在ibdata1文件里,时间久了这个文件就会变的非常大. 下面是参考网上 ...
- iOS开发基础109-网络安全
在iOS开发中,保障应用的网络安全是一个非常重要的环节.以下是一些常见的网络安全措施及对应的示例代码: Swift版 1. 使用HTTPS 确保所有的网络请求使用HTTPS协议,以加密数据传输,防止中 ...