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 作业中提到的 “玩了几天以后,大家发现了一些很有意思的现象,比如黄金点在逐渐地往下移动.” ...
随机推荐
- 实现 Emlog 最新评论列表不显示博主的评论回复
Tips:当你看到这个提示的时候,说明当前的文章是由原emlog博客系统搬迁至此的,文章发布时间已过于久远,编排和内容不一定完整,还请谅解` 实现 Emlog 最新评论列表不显示博主的评论回复 日期: ...
- 利用Vue做一个小购物车
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Atcoder Beginner Contest 321 G - Electric Circuit 题解 - 状压dp | 指定最低位
为了更好的阅读体验,请点击这里 题目链接:G - Electric Circuit 看到了 \(N\) 的数据范围,因此是显然的状压 dp. 不妨设 \(f_S\) 为仅使用 \(S\) 集合中的所有 ...
- 2023/3/21 组会：ChatGPT 对数据增强的影响及 ChatGPT 的鲁棒性，Dense 和 Document 检索方法
前两个也许跟上了,后两个完全没跟上,以后再详细读读吧qwq 反正组会跟不上才是正常现象. AugGPT: Leveraging ChatGPT for Text Data Augmentation 摘 ...
- 11-CSS定位
01 CSS定位概念理解 01 标准流布局概念的理解 02 position属性 02 相对定位 依然在标准流中 应用场景: 在不影响其它元素的情况下,对当前元素进行微调 <!DOCTYPE h ...
- adb连接安卓设备失败failed to start daemon
adb连接安卓设备失败failed to start daemon Reference:https://blog.csdn.net/whshuo2010/article/details/5109449 ...
- 使用bootchart 对 高通Android 进行性能分析
使用bootchart 对 高通Android 进行性能分析 Android版本:7.0 适用平台:高通和MTK 参考: https://blog.csdn.net/qq_19923217/artic ...
- 海思SDK 学习 ：001-HI_SDK 的 安装
背景 保密.不管怎么样接触到了海思SDK的开发,作为一项比较常见的技术,我们开展有关地学习. host平台 :Ubuntu 16.04 arm平台 : 3531d arm-gcc :4.9.4 概况 ...
- 攻防世界——Misc新手练习区解题总结<4>（11、12题）
第十一题ext3: 方法一:挂载 需要工具:kali虚拟机 下载附件后得到一个linux的系统光盘,我们用kali挂载一下 mount 123 /mnt//123为要挂载的文件名 寻找flag.txt ...
- 【论文阅读】RAL2022: Make it Dense: Self-Supervised Geometric Scan Completion of Sparse 3D LiDAR Scans in Large Outdoor Environments
0. 参考与前言 论文链接:https://ieeexplore.ieee.org/document/9812507 代码链接:https://github.com/PRBonn/make_it_de ...