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 作业中提到的 “玩了几天以后,大家发现了一些很有意思的现象,比如黄金点在逐渐地往下移动.” ...
随机推荐
- 在 Visual Studio 2022 (Visual C++ 17) 中使用 Visual Leak Detector
1 问题描述 1.1 内存泄漏的困扰和解决之道 在C/C++程序开发过程中,开发者受益于C/C++的强大,与此同时也承受着C/C++程序开发的额外风险.像Java.C#这类带GC(内存垃圾回收)的编程 ...
- shell 根据 指定列 进行 去除 重复行
根据指定列进行去除重复行 这里的重复是指如果两行的某一列数据相同,则认为是重复数据. 例如:第1行与第2行数据,其中的第2列(以- 作为分隔符)明显是重复的. 100069 - ARM Compile ...
- 3568F-系统启动阶段LOGO显示
- yb课堂 订单列表开发，完结 《四十五》
Order.vue <template> <div class="main"> <!--订单列表--> <div class=" ...
- P2984
[USACO10FEB]Chocolate Giving S 题意描述 Farmer John有B头奶牛(1<=B<=25000),有N(2*B<=N<=50000)个农场,编 ...
- 国内版Unity 2023编辑器无法切换到DX12模式的解决方法
2024.7.4更新:至6000.0.5f1c1,此问题已修复 在{安装目录}\Editor里(也就是Unity安装的根目录)建立一个名叫D3D12的文件夹. 去{安装目录}\Editor\Data\ ...
- 日文乱码转换 | Windows下使用方法详解
背景:有一个乱码的日文txt,需要让它正常显示. 一.下载转换软件 这应该是软件作者的主页 http://acg17.com/9713.html 也可以在这里获取软件: https://wwa.lan ...
- tp5 为什么使用单例模式
首先我们要知道明确单例模式这个概念,那么什么是单例模式呢?单例模式顾名思义,就是只有一个实例.作为对象的创建模式,单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例, 这个类我们 ...
- 欢迎访问pycharm 每次开启时都显示
文件->设置->外观与行为->系统设置->将"启动时重新打开项目"前的勾去掉
- Day 4 - 搜索进阶与模拟
启发式搜索 下面将简要介绍启发式搜索及其用法. 定义 启发式搜索(英文:\(\text{heuristic search}\))是一种在普通搜索算法的基础上引入了启发式函数的搜索算法. 启发式函数的作 ...