使用canvas来绘制折线图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>坐标点进行连线</title>
<style>
canvas{
border: 1px solid red;
}
</style>
</head>
<body>
<!-- 将今天绘制的坐标点进行连线 -->
<canvas width="600" height="400" id="canvas"></canvas>
</body>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var padding = 30;
var arrowHeight = 20,
arrowWidth = 10;
var x0 = padding,
y0 = canvas.height - padding;
var maxX = canvas.width - padding*2 -arrowHeight,
maxY = canvas.height - padding*2 - arrowHeight;
//绘制坐标轴
//X轴
ctx.moveTo(x0,y0);
ctx.lineTo(x0,y0 - maxY-arrowHeight);
//Y轴
ctx.moveTo(x0,y0);
ctx.lineTo(x0 + maxX +arrowHeight,y0);
ctx.stroke();
//绘制箭头
//X轴
ctx.beginPath();
ctx.moveTo(x0+maxX+arrowHeight,y0);
ctx.lineTo(x0+maxX,y0-arrowWidth*0.5);
ctx.lineTo(x0+maxX+arrowHeight*0.5,y0);
ctx.lineTo(x0+maxX,y0+arrowWidth*0.5);
//Y轴
ctx.moveTo(x0,y0-maxY-arrowHeight);
ctx.lineTo(x0-arrowWidth*0.5,y0-maxY);
ctx.lineTo(x0,y0-maxY-arrowHeight*0.5);
ctx.lineTo(x0+arrowWidth*0.5,y0-maxY);
ctx.fill();
//绘制点
ctx.beginPath();
var data = [ [ 10, 20 ], [ 15, 13 ], [ 17, 30 ], [ 30, 10 ], [ 20, 15 ] ];
//取点的数据
/*将其中X与Y的最大值找出来,因为要做一个比例的转化:
点坐标/max点坐标 = 页面上点坐标/canvas的轴的最大值*/
var pointX = Math.max.apply(null,data.map(function(v){return v[0];}));
var pointY = Math.max.apply(null,data.map(function(v){return v[1];}));
//法一:使用冒泡排序
for(var i =0;i<data.length-1;i++){
for(var j =0;j<data.length-1-i;j++){
if(data[j][0]>data[j+1][0]){
var temp = data[j +1];
data[j+1] = data[j];
data[j] = temp;
}
}
}
//声明一个新数组用于存储数据
var arr = [];
for(var i = 0 ; i < data.length ; i++){
var tempX = data[i][0]/pointX*maxX,
tempY = data[i][1]/pointY*maxY;
//一定要记得坐标的最后一步转换
var X = x0 + tempX,
Y = y0 - tempY;
arr.push([X,Y]);
ctx.moveTo(X-4,Y-4);
ctx.lineTo(X-4,Y+4);
ctx.lineTo(X+4,Y+4);
ctx.lineTo(X+4,Y-4);
}
console.log(arr);
ctx.fill();
//画线
ctx.beginPath();
//比较值,优化直线
arr.forEach(function(v,i){
ctx[['moveTo','lineTo'][i>0?1:0]](v[0],v[1]);
})
/*for(var i = 0 ; i < data.length-1 ; i++){
var tempX = data[i][0]/pointX*maxX,
tempY = data[i][1]/pointY*maxY;
var tempX1 = data[i+1][0]/pointX*maxX,
tempY1 = data[i+1][1]/pointY*maxY;
//一定要记得坐标的最后一步转换
var X = x0 + tempX,
Y = y0 - tempY,
X1 = x0 + tempX1,
Y1 = y0 - tempY1;
ctx.moveTo(X,Y);
ctx.lineTo(X1,Y1);
}*/
ctx.stroke();
</script>
</html>
使用canvas来绘制折线图的更多相关文章
- canvas+js绘制折线图
效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- canvas学习之折线图
接着上一张柱状图讲,我们是使用折线图: import {canvasPoint} from '../../assets/js/canvas';import {basicInfo,histogramMo ...
- 用canvas绘制折线图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Android自己定义组件系列【9】——Canvas绘制折线图
有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了非常多插件,可是非常多时候我们须要依据详细项目自己定义这些图表,这一篇文章我们一起来看看怎样在Android中使用Can ...
- 【带着canvas去流浪】(2)绘制折线图
目录 一. 任务说明 二. 重点提示 三. 示例代码 3.1 一般折线图 3.2 用贝塞尔曲线绘制平滑折线图 四. 大数据量场景 示例代码托管在:https://github.com/dashnowo ...
- Android自定义控件 -Canvas绘制折线图(实现动态报表效果)
有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas ...
- Android自定义组件系列【9】——Canvas绘制折线图
有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas ...
- 带着canvas去流浪系列之二 绘制折线图
[摘要] 用canvasAPI实现echarts简易图表 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制 ...
- 【Canvas】(2)---绘制折线图
绘制折线图 之前在工作的时候,用过百度的ECharts绘制折线图,上手很简单,这里通过canvas绘制一个简单的折线图.这里将一整个绘制过程分为几个步骤: 1.绘制网格 2.绘制坐标系 3.绘制点 4 ...
随机推荐
- BCH code
简单介绍 若循环码的生成多项式具有如下形式\(g(x)=LCM[m_{1}(x),m_{3}(x)..m_{2t-1}(x)]\) 其中LCM表示最小公倍式,t为纠错个数,\(m_{i}(x)\)为素 ...
- Codeforce-1106-D. Lunar New Year and a Wander(DFS遍历+vector存图+set)
Lunar New Year is approaching, and Bob decides to take a wander in a nearby park. The park can be re ...
- QQ链接病毒分析
QQ链接病毒分析 特征 点击病毒链接后,自动会在每一时刻范围内通过所有途径群发新的病毒链接(途径包括Qzone,群聊等) 分析 首先看一下病毒链接的一个样例 http://news.soso.com/ ...
- VBS常用脚本及其解说一览
取得本机IP strComputer = "." Set objWMIService = GetObject("winmgmts:\\" & strCo ...
- 给新人看的 JavaScript的继承
//这个继承方式是给新人看的,逻辑简单一些 Object.extend=function(props){ //继承父类 var prototype=Object.create(this.prototy ...
- 【实战】SSL和TLS漏洞验证
工具下载:git clone https://github.com/drwetter/testssl.sh.git 实验环境:192.168.1.22(bee-box v1.6) 192.168.1. ...
- 踩坑--http返回码之302状态码
项目介绍:springboot+shiro+maven 业务需求:拦截一切不登录的盗链URL,除了问卷调查,可以给任意用户填写和提交意外. 问题重现:表单提交过程中返回302状态码,我就觉得很奇怪.在 ...
- Java基础20-构造代码块
特点: 对象一建立就运行了,而且优先于构造函数执行 作用:给对象初始化的 构造代码块和构造方法的区别: 构造方法是对应的对象进行初始化 构造代码块是给所有的对象进行统一的初始化 public clas ...
- Apache Beam的架构概览
不多说,直接上干货! Apache Beam是一个开源的数据处理编程库,由Google贡献给Apache的项目,前不久刚刚成为Apache TLP项目.它提供了一个高级的.统一的编程模型,允许我们通过 ...
- jquery返回顶部和底部插件和解决ie6下fixed插件
(function($){ //返回顶部和底部插件 $.fn.extend({ goTopBootom:function (options){ //默认参数 var defaults = { &quo ...