canvas绘制折线图
效果图：
重难点：
1、画布左上角的顶点的坐标为（0 ，0），右下角的坐标最大，与平常思维相反
2、数据的处理
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
<script src = "recordPaint.js"></script>
<style>
canvas{
width:600px;
height:600px;
border:1px solid #ddd;
background:#eee;
display:block;
margin:40px auto;
}
</style>
</head> <script>
window.onload = function(){
//十二个月对应的y轴数据
var datas = [1200,2000,3000,500,200,800,1800,2200,2600,1000,600,300];
//获取画布DOM
var recordCvs = document.getElementById("recordCvs");
//调用绘制画布函数
recordPaint(recordCvs,datas);
}
</script>
<body>
<div id="recordContent">
<canvas id="recordCvs" width = "600" height = "400">
您的浏览器不支持canvas
</canvas>
</div>
</body>
</html> recordPaint.js对应代码：
recordPaint = function (elem, datas) {
//1.创建画布对象
var context = elem.getContext('2d');
//2、获取画布的宽度和高度
const WIDTH = elem.width;
const HEIGHT = elem.height;
//定义坐标轴相对于画布的内边距
var padding = 20;//初始化内边距
var paddingLeft = 50;// 至少大于绘制文字的宽度
var paddingBottom = 30;// 至少大于绘制文字的高度
// 4、定义绘制坐标轴的关键点的坐标值
var axisY = { // y轴的起点坐标值
x: paddingLeft,
y: padding
};
var origin = { // 原点坐标值（x轴与y轴交叉点）
x: paddingLeft,
y: HEIGHT - paddingBottom
};
var axisX = { // X轴的起点坐标值
x: WIDTH - padding,
y: HEIGHT - paddingBottom
};
//绘制坐标轴
context.beginPath();
context.moveTo(axisY.x, axisY.y);
context.lineTo(origin.x, origin.y);
context.lineTo(axisX.x, axisX.y);
context.stroke();
//绘制坐标轴的箭头
context.beginPath();
context.moveTo(axisY.x - 5, axisY.y + 10);
context.lineTo(axisY.x, axisY.y);
context.lineTo(axisY.x + 5, axisY.y + 10);
context.stroke();
context.beginPath();
context.moveTo(axisX.x - 10, axisX.y - 5);
context.lineTo(axisX.x, axisX.y);
context.lineTo(axisX.x - 10, axisX.y + 5);
context.stroke();
//存储x轴的值
var pointsX = [];
//7、绘制坐标轴的刻度（x轴的月份和y轴的金额）
//x轴的月份
var month = {
x: paddingLeft,
y: HEIGHT - paddingBottom + 5
};
for (var i = 1; i <= 12; i++) {
context.textBaseline = "top";
context.fillText(i + "月", month.x, month.y);
pointsX.push(month.x);
month.x += (axisX.x - origin.x) / 12;
}
//绘制y轴的金额
//从众多的关键金额中，渠道最高金额
var max = Math.max.apply(Math, datas);
var moneyY = (origin.y - axisY.y) / (max / 500 + 1);
var money = {
x: axisY.x - 5,
y: axisY.y + moneyY,
jin: max
};
//遍历最高值/间隔
context.textAlign = "right";
for (var i = 0; i < max / 500; i++) {
context.fillText(money.jin + "元", money.x, money.y);
money.y += moneyY;
money.jin -= 500;
}
//绘制折线
context.beginPath();
for (let i = 0; i < datas.length; i++) {
//x轴的坐标
let pointX = pointsX[i];
//y轴的坐标
let pointY = origin.y - (origin.y - (axisY.y + moneyY)) * datas[i] / max;
if (i === 0) {
// context.textBaseline = "";
context.textAlign = "left"
context.moveTo(pointX, pointY);
} else {
context.textBaseline = "bottom";
context.textAlign = "center"
context.lineTo(pointX, pointY);
}
//绘制钱
context.fillText(datas[i], pointX, pointY);
}
context.stroke();
//绘制小圆点
for(let i = 0; i < datas.length; i++){
//x轴的坐标
let pointX = pointsX[i];
//y轴的坐标
let pointY = origin.y - (origin.y - (axisY.y + moneyY)) * datas[i] / max;
context.fillStyle = "#aa0000";
context.beginPath();
context.arc(pointX,pointY,3,0,2*Math.PI);
context.fill();
}
};
canvas绘制折线图的更多相关文章
- 用canvas绘制折线图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Android自己定义组件系列【9】——Canvas绘制折线图
有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了非常多插件,可是非常多时候我们须要依据详细项目自己定义这些图表,这一篇文章我们一起来看看怎样在Android中使用Can ...
- Android自定义控件 -Canvas绘制折线图(实现动态报表效果)
有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas ...
- Android自定义组件系列【9】——Canvas绘制折线图
有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas ...
- canvas绘制折线图(仿echarts)
遇到的问题:Retina屏上字体线条模糊问题 解决方案:放大canvas的大小,然后用css压缩回原大小,例如:想要900*400的画布,先将画布设置为 width="1800px" ...
- 【带着canvas去流浪】（2）绘制折线图
目录 一. 任务说明 二. 重点提示 三. 示例代码 3.1 一般折线图 3.2 用贝塞尔曲线绘制平滑折线图 四. 大数据量场景 示例代码托管在:https://github.com/dashnowo ...
- 带着canvas去流浪系列之二 绘制折线图
[摘要] 用canvasAPI实现echarts简易图表 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制 ...
- 【Canvas】(2)---绘制折线图
绘制折线图 之前在工作的时候,用过百度的ECharts绘制折线图,上手很简单,这里通过canvas绘制一个简单的折线图.这里将一整个绘制过程分为几个步骤: 1.绘制网格 2.绘制坐标系 3.绘制点 4 ...
- html5绘制折线图
html5绘制折线图详细代码 <html> <canvas id="a_canvas" width="1000" height="7 ...
随机推荐
- cookie和session实现登录验证
回话技术,比如在做登录功能的时候,需要配合是用存储在客户端的cookie信息,以及存储在服务端的session来实现登录功能.在cookie中保存了用户的信息,特别是一个特殊的令牌信息,当用户拿着这个 ...
- Image图片
# View more python tutorials on my Youtube and Youku channel!!! # Youtube video tutorial: https://ww ...
- Python如何规避全局解释器锁(GIL)带来的限制
编程语言分类概念介绍(编译型语言.解释型语言.静态类型语言.动态类型语言概念与区别) https://www.cnblogs.com/zhoug2020/p/5972262.html Python解释 ...
- 错综复杂！“两桶油”与多个APP上演暧昧秀
O2O的浪潮席卷了一个又一个行业,即使在资本寒冬下一批批O2O企业倒下,却总有另一批毫不犹豫地站起来.其中,汽车后服务市场就是被O2O台风重点扫过.洗车.保养.维修.美容.改装等相关O2O企业层出不穷 ...
- SurfaceView和TextureView的区别
SurfaceView和TextureView均继承于android.view.View,与其它View不同的是,两者都能在独立的线程中绘制和渲染,在专用的GPU线程中大大提高渲染的性能.Surfac ...
- 使用EventBus + Redis发布订阅模式提升业务执行性能
前言 最近一直奔波于面试,面了几家公司的研发.有让我受益颇多的面试经验,也有让我感觉浪费时间的面试经历~因为疫情原因,最近宅在家里也没事,就想着使用Redis配合事件总线去实现下具体的业务. 需求 一 ...
- Web中间件常见漏洞总结
一.IIS中间组件: 1.PUT漏洞 2.短文件名猜解 3.远程代码执行 4.解析漏洞 二.Apache中间组件: 1.解析漏洞 2.目录遍历 三.Nginx中间组件: 1.文件解析 2.目录遍历 3 ...
- 后端工程师必知必会的前端 css 知识
后端工程师虽然大部分工作都是跟服务器缓存数据库打交道,但有时也需要写一些前端代码. 有些公司的OAM后台基本是由后端工程师承包的,所以前端基础知识是必须要掌握的:就算开发中不直接写前段代码,了解前端知 ...
- DIV的失去焦点(blur)实现
用防抖实现DIV鼠标移出消失 由于div标签本身不支持onblur事件,所以对于点击一个按钮弹出的div,我们想要当这个div失去焦点的时候,让它消失不能使用的onblur来实现. 但是可以利用 ...
- python3 flask shell
python shell来操作flask flask shell 报错: from flask_bootstrap import BootstrapImportError: No module nam ...