h5画图表
折线：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用canvas绘制折线图</title>
</head>
<body>
<canvas id="cv"></canvas>
</body>
</html>
<script>
var cv = document.getElementById("cv");
cv.width = 600;
cv.height = 400;
cv.style.border = "1px solid red";
var ctx = cv.getContext("2d");
var data2 = [.3, .1, .2, .4, .2, .7, .3, .9];
var data3 = [3, 12, 14, 17, 29, 33, 40, 52];
getBrokenLine(data2, "#f00");
getBrokenLine(data3, "#0f0");
//封装一个折线图的函数
function getBrokenLine(data, color) {
var maxNum = Math.max.apply(null, data); //求数组中的最大值
var padding = 20, //边距
x0 = padding, //原点x轴坐标
y0 = cv.height - padding, //原点y轴坐标
xArrow_x = padding, //x轴箭头处坐标x
xArrow_y = padding, //x轴箭头处坐标y
yArrow_x = cv.width - padding, //y轴箭头处坐标x
yArrow_y = cv.height - padding, //y轴箭头处坐标y
arrowWidth = 10, //箭头的宽度
xLength = cv.width - 2*padding - arrowWidth, //x轴的长度
yLength = cv.height - 2*padding - arrowWidth, //y轴的长度
pointsWidth = xLength/(data.length + 1); //折线上每个点之间的距离
ctx.beginPath();//控制绘制的折线不受坐标轴样式属性的影响
//绘制x轴
ctx.moveTo(x0, y0);
ctx.lineTo(xArrow_x, xArrow_y);
ctx.moveTo(xArrow_x, xArrow_y);
ctx.lineTo(xArrow_x - arrowWidth, xArrow_y + arrowWidth);
ctx.moveTo(xArrow_x, xArrow_y);
ctx.lineTo(xArrow_x + arrowWidth, xArrow_y + arrowWidth);
//绘制y轴
ctx.moveTo(x0, y0);
ctx.lineTo(yArrow_x, yArrow_y);
ctx.moveTo(yArrow_x, yArrow_y);
ctx.lineTo(yArrow_x - arrowWidth, yArrow_y - arrowWidth);
ctx.moveTo(yArrow_x, yArrow_y);
ctx.lineTo(yArrow_x - arrowWidth, yArrow_y + arrowWidth);
ctx.strokeStyle = "#000";
//中断（坐标轴和折线的）连接
ctx.stroke();
ctx.beginPath();
//绘制折线
for (var i = 0; i < data.length; i++) {
var pointX = padding + (i + 1) * pointsWidth;
var pointY = padding + arrowWidth + (1 - data[i]/maxNum) * yLength;
ctx.lineTo(pointX, pointY);
}
ctx.strokeStyle = color;
ctx.stroke();
}
</script>
画直线：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用面向对象的思想 封装 在canvas绘制直线的函数</title>
</head>
<body>
<canvas id="cv"></canvas>
</body>
</html>
<script>
var cv = document.getElementById("cv");
cv.width = 600;
cv.height = 300;
cv.style.border = "1px solid red";
var ctx = cv.getContext("2d");
//面向对象编程
//1 创建构造函数
//2 构造函数的原型设置
//3 调用的时候，通过 new+构造函数 来创建一个对象（实例）
//构造绘制直线的函数
function drawLine(parameters) {
this.init(parameters);
}
//替换原型对象实现继承
drawLine.prototype = {
constructor: drawLine,
init: function (parameters) {
this.ctx = parameters.ctx;
this.startX = parameters.points[0];
this.startY = parameters.points[1];
this.endX = parameters.points[2];
this.endY = parameters.points[3];
//以下3个属性，可以不设置，用短路运算实现添加默认属性值
this.lineWidth = parameters.lineWidth || 1;
this.lineDash = parameters.lineDash || [];
this.strokeStyle = parameters.strokeStyle || "#000";
},
//原型中，一般用来储存对象的方法或者共有的属性
stroke: function () {
this.ctx.beginPath();
this.ctx.moveTo(this.startX, this.startY);
this.ctx.lineTo(this.endX, this.endY);
this.ctx.lineWidth = this.lineWidth;
this.ctx.setLineDash(this.lineDash);
this.ctx.strokeStyle = this.strokeStyle;
this.ctx.stroke();
}
};
//调用构造函数，传入参数
var line = new drawLine({
ctx: ctx,
points: [100, 100, 300, 100],
lineDash: [4, 2],
strokeStyle: "red"
});
line.stroke();
var line2 = new drawLine({
ctx: ctx,
points: [100, 200, 300, 200],
lineWidth: 6
});
line2.stroke();
</script>
h5画图表的更多相关文章
- H5实现图表和地图
H5实现图表和地图的代码如下: <!DOCTYPE html> <html> <head> <title>图表和地图</title> < ...
- jqplot利用ajax传值画图表（利用jsp连接数据库）
实现从数据库中取得数据,再把数据传给画jqplot的jsp界面!jsp界面再进行画图,画出我们所需的图表! 有两个jsp界面,7-12.jsp用来连接数据库,并把数据传给ajaxauto.jsp,aj ...
- JAVA开发人员画图表总结（ECHARTS）
随着大数据的到来,越来越多的数据需求需要开发,而这些需求不可避免需要使用JS画出图表,而大多后端JAVA开发人员对JS不太熟悉,导致身心倍受折磨,今天记录以下最近我使用echarts的步骤,供参考: ...
- python__画图表可参考(转自：寒小阳 逻辑回归应用之Kaggle泰坦尼克之灾)
出处:http://blog.csdn.net/han_xiaoyang/article/details/49797143 2.背景 2.1 关于Kaggle 我是Kaggle地址,翻我牌子 亲,逼格 ...
- h5画圆
下面一段代码是,h5的画圆,半圆,四分之一圆等效果 <!DOCTYPE html> <html lang="en"> <head> <me ...
- Spark之路 --- Scala用JFreeChart画图表实例
JFreeChart介绍 JFreeChart是JAVA平台上的一个开放的图表绘制类库.它完全使用JAVA语言编写,是为applications, applets, servlets 以及JSP等使用 ...
- python matplotlib 画图表（点状图）
首先,选择自己希望画的图:在官方网站就可以直接点击图,然后就会出现源代码: http://matplotlib.org/gallery.html
- html5 canvas 画图表
(function () { var canvas = document.createElement("canvas"); canvas.width = 800; canvas.h ...
- python 每日一练： 读取log文件中的数据，并画图表
之前在excel里面分析log数据,简直日了*了. 现在用python在处理日志数据. 主要涉及 matplotlib,open和循环的使用. 日志内容大致如下 2016-10-21 21:07:59 ...
随机推荐
- 【docker】docker部署spring boot服务 选择配置文件启动
默认启动命令: docker run --name swapping -itd --net=host -v /etc/localtime:/etc/localtime:ro -v /etc/timez ...
- pthread_join与pthread_detach细节问题
http://www.360doc.com/content/13/0106/09/9171956_258497083.shtml pthread_t pthr; pthread_create(& ...
- 使用系统自带的 UIRefreshControl 实现下拉刷新
UIRefreshControl 为 UITableViewController 中的一个属性,从以下可以看出, IOS6.0 以上才支持. @property (nonatomic,retain) ...
- Android判断用户的网络类型(2/3/4G、wifi)
很多时候需要先判断当前用户的网络,才会继续之后的一些处理逻辑.但网络类型获取这一块,我用我自己的的手机调试时遇到一些问题,这里记录一下. 一加手机一代,移动4G 网络,得到的subtype类型值为17 ...
- 《Redis设计与实现》
<Redis设计与实现> 基本信息 作者: 黄健宏 丛书名: 数据库技术丛书 出版社:机械工业出版社 ISBN:9787111464747 上架时间:2014-6-3 出版日期:2014 ...
- 《例说XBee无线模块开发》
<例说XBee无线模块开发> 基本信息 原书名:The Hands-on XBee Lab Manual:Experiments that Teach you XBee Wireless ...
- 通过pycharm使用git
前言 使用git+pycharm有一段时间了,算是稍有点心得,这边整理一下,可能有的方法不是最优,欢迎交流,可能还是习惯敲命令去使用git,不过其实pycharm已经帮忙做了很多了,我们可以不用记住那 ...
- python读取yaml配置文件
支持多种语言:python.js.golang.java.c.c++ YAML 语言(发音 /ˈjæməl/ )的设计目标,就是方便人类读写.它实质上是一种通用的数据串行化格式. 它的基本语法规则如下 ...
- DOS批处理中%cd%和%~dp0的异同分析
在DOS的批处理中,有时候需要知道当前的路径.在DOS中,有两个环境变量可以跟当前路径有关,一个是%cd%, 一个是%~dp0. 这两个变量的用法和代表的内容是不同的. 1. %cd% 可以用在批处理 ...
- 菜鸟学步之 爆破AspriseOCR 4.0
最近写一个小程序要用到OCR控件,在网上查了一下,据说AspriseOCR 4.0效果不错.试用了一下发现的确还行,不过就是要注册,试用版本每次都会弹出讨厌的对话框来.网上看到有一篇“新人报道–处女破 ...