使用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 ...
随机推荐
- python安装环境配置、python模块添加、sublime text编辑器配置
前提: 本文讲述的是 windows环境 python相应的安装配置. 进入官网找安装包,官网地址如下:https://www.python.org/downloads/ 找到相应2.7.x或3.x ...
- bootstrap Table从零开始
本文博主将从零开始,一步一步的告诉大家如何在前端用bootstrap Table插件展示一个表格 首先,要下载bootstrap Table插件所必须的js,地址:https://github.c ...
- eclipse 安装 scala
1.官网下载地址 http://scala-ide.org/download/current.html 目前最新的版本 http://download.scala-ide.org/sdk/lithiu ...
- 「BZOJ1485」[HNOI2009] 有趣的数列 (卡特兰数列)
「BZOJ1485」[HNOI2009] 有趣的数列 Description 我们称一个长度为2n的数列是有趣的,当且仅当该数列满足以下三个条件: (1)它是从1到2n共2n个整数的一个排列{ai ...
- Android Zygote进程是如何fork一个APP进程的
进程创建流程 不管从桌面启动应用还是应用内启动其它应用,如果这个应用所在进程不存在的话,都需要发起进程通过Binder机制告诉system server进程的AMS system server进程的A ...
- (转)裸奔的后果!一次ssh被篡改的入侵事件
裸奔的后果!一次ssh被篡改的入侵事件 原文:http://blog.51cto.com/phenixikki/1546669 通常服务器安全问题在规模较小的公司常常被忽略,没有负责安全的专员,尤其是 ...
- 安装Newton版Glance
Image Service 本文介绍在controller节点上安装.配置Image服务 glance,镜像存储在本地文件系统 安装准备 controller 节点 ip:192.168.81.11 ...
- ssh免密码登录快速配置方法
环境需求: 两台Linux主机 A (192.168.3.101)和 B(192.168.3.102),如何使用主机 A 免密码登录 主机B ? 配置步骤: 首页登录主机 A ,在主机A上生成自己 ...
- 阻止事件的默认行为,例如click <a>后的跳转~
在W3C中,使用preventDefault()方法: 在IE中,使用window.event.returnValue = false.
- 命令行编译java项目
命令行编译java项目 项目名: testproj 目录 src -> cn -> busix -> test bin lib 编译项目 cd testproj javac -d . ...