canvas绘制经典折线图(一)
最终效果图如下:
实现步骤如下:注-引用了jQuery
HTML代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>canvas绘制折线图</title>
<script src="scripts/jquery-1.11.3.js"></script>
<script src="scripts/recordPaint.js"></script>
<style> </style>
</head>
<script>
$(function(){
/*
* 定义绘制折线图的关键数据(12个月的消费记录-金额)
* 封装函数专门用于绘制折线图
recordPaint(Elem,Data)方法
* Elem - 表示<canvas>元素
* Data - 表示关键数据
*/
var datas = [1200,2000,3000,500,200,800,1800,2200,2600,1000,600,300];
recordPaint($("#recordCvs")[0],datas);
});
</script>
<body>
<div id="recordContent">
<canvas id="recordCvs" width="600" height="400"></canvas>
</div>
</body>
</html>
JS代码:即HTML中引用的外部JS文件<script src="scripts/recordPaint.js"></script>
/**
* Created by walker on 2015/11/26.
* 定义recordPaint()方法
*/
function recordPaint(Elem,Data){
// 1. 创建画布对象
var context = Elem.getContext('2d');
// 2. 获取画布的宽度和高度
const WIDTH = Elem.width;
const HEIGHT = Elem.height;
// 3. 定义坐标轴相对画布的内边距
var padding = 20;//初始化内边距
var paddingLeft = 60;//至少大于绘制文字的宽度
var paddingBottom = 30;//至少大于绘制文字的高度
// 4. 定义绘制坐标轴的关键点的坐标值
var axisY = {// y轴的起点坐标值
x : paddingLeft,
y : padding
};
var origin = {// 原点坐标值(x轴与y轴相交点)
x : paddingLeft,
y : HEIGHT - paddingBottom
};
var axisX = {
x : WIDTH - padding,
y : HEIGHT - paddingBottom
};
// 5. 绘制坐标轴
context.beginPath();
context.moveTo(axisY.x,axisY.y);
context.lineTo(origin.x,origin.y);
context.lineTo(axisX.x,axisX.y);
context.stroke();
// 6. 绘制坐标轴的箭头
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
}
// 设置字体
context.font = "14px 微软雅黑";
// 设置垂直对齐
context.textBaseline = "top";
for(var i=1;i<=12;i++){
pointsX[pointsX.length] = month.x;
// 绘制月份信息
context.fillText(i+"月",month.x,month.y);
// 改变每次绘制的x坐标轴的值
month.x += (axisX.x - origin.x)/12;
} // 绘制y轴的金额
// 从众多的关键金额中,取到最高金额
/*
var datas = [];
for(index in Data){
datas[datas.length] = Data[index];
}
function sortNumber(a,b){
return a - b;
}
var max = datas.sort(sortNumber)[datas.length-1];
*/
var max = Math.max.apply(Math,Data); 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);
// y轴向下移动(增加)
money.y += moneyY;
// 金额每次减500
money.jin -= 500;
} /*
绘制折线
* 12个折点的x轴值,对应12个月文字的x轴值
* 折点的y轴值等于原点的y轴值-折点到原点的距离
* 折点到原点的距离 = (3000点的y到原点的y的长度)*当前金额/3000
*/
context.beginPath();
for(var i=0;i<Data.length;i++){
// 获取折点的x和y值
var pointY = origin.y - (origin.y - (axisY.y + moneyY))*Data[i]/max;
var pointX = pointsX[i];
// 绘制折线
if(i == 0){
context.textAlign = "left";
//context.textBaseline = "bottom";
context.moveTo(pointX,pointY);
}else{
context.textAlign = "center";
context.textBaseline = "bottom";
context.lineTo(pointX,pointY);
}
// 绘制折点的金额
context.fillText(Data[i],pointX,pointY);
}
context.stroke();
// 绘制12个折点的圆
for(var i=0;i<Data.length;i++){
// 获取折点的x和y值
var pointY = origin.y - (origin.y - (axisY.y + moneyY))*Data[i]/max;
var pointX = pointsX[i];
// 绘制圆
context.fillStyle = "red";
context.beginPath();
context.arc(pointX,pointY,3,0,Math.PI*2);
context.fill();
} }
总结:每个拐点的坐标值要清晰
canvas绘制经典折线图(一)的更多相关文章
- canvas图表(2) - 折线图
原文地址:canvas图表(2) - 折线图 话说这天气一冷啊, 就患懒癌, 就不想码代码, 就想着在床上舒舒服服看视频. 那顺便就看blender视频, 学习下3D建模, 如果学会了建3D模型, 那 ...
- canvas学习之折线图
接着上一张柱状图讲,我们是使用折线图: import {canvasPoint} from '../../assets/js/canvas';import {basicInfo,histogramMo ...
- canvas制作柱形图/折线图/饼状图,Konva写动态饼状图
制作饼状图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- JFreeChart绘制XY折线图(工具类设计)
准备用Java写通信的仿真平台作为毕业设计,相比matlab绘图,Java绘图需要自己去写很多工具类,博主在这采用了JFreeChart的开源解决方案,摸索着自己写了一个XY折线图工具类,话不多说贴源 ...
- Html5 canvas 绘制彩票走势图
因须要 要实现一个类似彩票走势图的功能,初次学Html5 ,非常多地方不明白,前段时间也发帖请教过这个问题.也是没给个明白说话,在网上搜了非常多,也没有实现的样例,今天细致研究了下.发现事实上也不是非 ...
- canvas绘制经典星空连线效果
来自:https://segmentfault.com/a/1190000009675230 下面开始coding:先写个canvas标签 <canvas height="620&qu ...
- [canvas]利用canvas绘制自适应的折线图
前段时间学习了用canvas绘制折现图,且当画布变换大小,折现图会随之变化,现附上代码 <!DOCTYPE html> <html lang="en"> & ...
- 【带着canvas去流浪】(2)绘制折线图
目录 一. 任务说明 二. 重点提示 三. 示例代码 3.1 一般折线图 3.2 用贝塞尔曲线绘制平滑折线图 四. 大数据量场景 示例代码托管在:https://github.com/dashnowo ...
- 带着canvas去流浪系列之二 绘制折线图
[摘要] 用canvasAPI实现echarts简易图表 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制 ...
随机推荐
- iOS开发——高级技术&本地化与国际化详解
本地化与国际化详解 效果如下: 英语: 中文: 具体实现如下: ...
- java 成长之路
分享总结 title: java 成长之路 tags: grammar_cjkRuby: true 经验差异 1-3年 要求 建议 3-5年 建议 5年+ 经验差异 最近一年比较忙,经历了创业公司的倒 ...
- Utility2:Appropriate Evaluation Policy
UCP收集所有Managed Instance的数据的机制,是通过启用各个Managed Instances上的Collection Set:Utility information(位于Managem ...
- 我为NET狂-----大前端专帖
http://dnt.dkill.net/Article/Detail/321 本来前端的东西是不想开个专贴的,这样网友容易产生依赖,前端的东西看看书,平时仿照几个网站,遇到问题再调调增加点经验,基本 ...
- Create views of OpenCASCADE objects in the Debugger
Create views of OpenCASCADE objects in the Debugger eryar@163.com Abstract. The Visual Studio Natvis ...
- vue实例属性(vm.$els)
不需要表达式 参数: id(必需) 用法: 为 DOM 元素注册一个索引,方便通过所属实例的 $els 访问这个元素. 注意: 因为 HTML 不区分大小写,camelCase 名字比如 v-el:s ...
- error: failed to push some refs to '......'解决方案
由于是初学者,又因为最近项目需要,只好边学边用吧. 在使用 “git push origin master” 时出现了以下问题 网上搜到的解决方案,可用: 先输入: git stash(用于暂存当前 ...
- 分享几个.NET WinForm开源组件,纪念逐渐远去的WinForm。。。
前面3个月的时间内,这些.NET开源项目你知道吗?系列文章已经发表了3篇,共计45个平时接触比较少,曾经默默无闻的.NET开源项目,展示给大家,当然不是每个人都能用得上,但也的确是有些人用了,反响还不 ...
- java后台搭建学习计划
1. 使用maven管理java项目 2.linux安装mysql 3.linux安装redis 4. mybatis使用demo 5. cannal使用demo 6. 用spring4开发rest应 ...
- scikit-learn 线性回归算法库小结
scikit-learn对于线性回归提供了比较多的类库,这些类库都可以用来做线性回归分析,本文就对这些类库的使用做一个总结,重点讲述这些线性回归算法库的不同和各自的使用场景. 线性回归的目的是要得到输 ...