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 作业中提到的 “玩了几天以后,大家发现了一些很有意思的现象,比如黄金点在逐渐地往下移动.” ...
随机推荐
- 【iOS】bugly进阶系列
初学者使用bugly仅仅是用于接受崩溃日志,但是其实bugly除了接受崩溃之外还可以做许多事情.这里我把bugly分成三大模块逐一进行探讨. (其实bugly顶部的三个标题就预示着bugly的功能本来 ...
- 『vulnhub系列』Deathnote-1
『vulnhub系列』Deathnote-1 下载地址: https://www.vulnhub.com/entry/deathnote-1,739/ 信息搜集: 使用nmap扫描存活主机,发现主机开 ...
- Spark3学习【基于Java】5. Spark-Sql联表查询JOIN
大数据场景下,联表远比微小型关系型数据库中使用的频繁.网上有句话: 传统数据库单机模式做Join的场景毕竟有限,也建议尽量减少使用Join. 然而大数据领域就完全不同,Join是标配,OLAP业务根本 ...
- Mac 版本10.15.4 安装 telnel工具
下载脚本 mac新版本安装telnel发生的变化,进入下面的链接,右键另存为,保存到桌面 https://raw.githubusercontent.com/Homebrew/install/mast ...
- 六.黑马程序员-eclipse的使用和快捷键
1.Eclipse的概述 A: 是一个集成开发工具,专门针对java的 B: Eclipse 免费的 开源 C: MyEclipse 收费的 具体良好的插件扩展功能,针对插件收费2.Eclipse的使 ...
- 启动数据分析软件SPSS17遭遇的两弹窗解决方案
问题描述 朋友请我帮她安装 SPSS17 这款软件,我寻思这是啥软件,谷歌一下,发现是一个数据分析工具. 在一系列的下一步.确定后,打开时,第 1 个惊喜弹窗来了: [弹窗内容]应用程序无法启动,因为 ...
- 在该serializer中使用source参数指定序列化时使用的字段的choices选项
在序列化中获取time_unit字段的中文名称,你可以使用choices选项中定义的第二个值,即元组中的第二个元素.你可以通过定义一个serializer,然后在该serializer中使用sourc ...
- 使用 useLazyAsyncData 提升数据加载体验
title: 使用 useLazyAsyncData 提升数据加载体验 date: 2024/7/19 updated: 2024/7/19 author: cmdragon excerpt: 摘要: ...
- 2024 Selenium10个替代品
随着自动化测试需求的不断增长,Selenium作为广泛使用的自动化测试工具,虽然功能强大,但也存在一些限制和挑战.在2024年, 越来越多的替代工具涌现,它们提供了更高效.更易用的解决方案.那么,哪些 ...
- redis数据结构：RedisObject，SkipList，SortedSet
1.RedisObject对象 redis中任何KV都会被封装为RedisObject对象,也叫做Redis对象 2.SkipList 跳表 元素按照升序排列存储,是有序的双向链表 节点可以有多个指针 ...