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 作业中提到的 “玩了几天以后,大家发现了一些很有意思的现象,比如黄金点在逐渐地往下移动.” ...
随机推荐
- vue.config.js配置优化
vue.config.js完整代码如下: 'use strict'; // Template version: 1.3.1 // see http://vuejs-templates.github.i ...
- Project Euler 1~10 野蛮题解
这些题都比较简单就不贴代码和做法了 23333333 具体到做法就是枚举暴力,这十题中可能难一点地方的就是筛质数表,可以学习一下 Eratosthenes 筛法或者是欧拉筛. 如果您不会前十题建议好好 ...
- 为什么Linux不能在中断中睡眠
中断分析 首先来看中断的流程: 1.进入中断处理程序---> 2.保存关键上下文----> 3.开中断(sti指令)---> /* 硬中断:对应于1.2.3步骤. 在这几个步骤中,所 ...
- setsocket、getsocket 函数详解
背景 以前用到socket的时候会调用setsocket进行设置,现在整理有关的笔记的时候,重新查阅资料发现有点奇怪,发现大家比较少使用到这个. setsocket/getsocket #includ ...
- get基于报错的sql注入
get基于报错的sql注入发现 Less1: sqli-labs第一关提示说在网页上输入id,也就是?id=1. 但这个?是什么意思,它表示index.php?也就是默认页面.然后?id=1就是把id ...
- python爬虫-request模块
1. requests 中的请求方法 HTTP 请求方法: requests.get(url, params=None, **kwargs) # GET 请求 requests.post(url, d ...
- 3568F-Linux-RT系统测试手册
- SpringBoot 2.5.5整合SpringSecurity+JWT
目录结构 添加依赖 <!-- SpringSecurity --> <dependency> <groupId>org.springframework.boot&l ...
- tp5生命周期
https://www.kancloud.cn/manual/thinkphp5/118011 1.入口文件 用户发起的请求都会经过应用的入口文件,通常是 public/index.php文件.当然, ...
- 基础-数组_C语言
C 语言支持数组数据结构,它可以存储一个固定大小的相同类型元素的顺序集合.数组是用来存储一系列数据,但它往往被认为是一系列相同类型的变量. 数组的声明并不是声明一个个单独的变量,比如 runoob0. ...