折线：

<!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画图表的更多相关文章

  1. H5实现图表和地图

    H5实现图表和地图的代码如下: <!DOCTYPE html> <html> <head> <title>图表和地图</title> < ...

  2. jqplot利用ajax传值画图表（利用jsp连接数据库）

    实现从数据库中取得数据,再把数据传给画jqplot的jsp界面!jsp界面再进行画图,画出我们所需的图表! 有两个jsp界面,7-12.jsp用来连接数据库,并把数据传给ajaxauto.jsp,aj ...

  3. JAVA开发人员画图表总结（ECHARTS）

    随着大数据的到来,越来越多的数据需求需要开发,而这些需求不可避免需要使用JS画出图表,而大多后端JAVA开发人员对JS不太熟悉,导致身心倍受折磨,今天记录以下最近我使用echarts的步骤,供参考: ...

  4. python__画图表可参考(转自：寒小阳 逻辑回归应用之Kaggle泰坦尼克之灾)

    出处:http://blog.csdn.net/han_xiaoyang/article/details/49797143 2.背景 2.1 关于Kaggle 我是Kaggle地址,翻我牌子 亲,逼格 ...

  5. h5画圆

    下面一段代码是,h5的画圆,半圆,四分之一圆等效果 <!DOCTYPE html> <html lang="en"> <head> <me ...

  6. Spark之路 --- Scala用JFreeChart画图表实例

    JFreeChart介绍 JFreeChart是JAVA平台上的一个开放的图表绘制类库.它完全使用JAVA语言编写,是为applications, applets, servlets 以及JSP等使用 ...

  7. python matplotlib 画图表（点状图）

    首先,选择自己希望画的图:在官方网站就可以直接点击图,然后就会出现源代码: http://matplotlib.org/gallery.html

  8. html5 canvas 画图表

    (function () { var canvas = document.createElement("canvas"); canvas.width = 800; canvas.h ...

  9. python 每日一练： 读取log文件中的数据，并画图表

    之前在excel里面分析log数据,简直日了*了. 现在用python在处理日志数据. 主要涉及 matplotlib,open和循环的使用. 日志内容大致如下 2016-10-21 21:07:59 ...

随机推荐

  1. Work Management Service application in SharePoint 2016

    最近开始弄SharePoint 2016的Workflow,遇到问题发现没有了Work Management Service application,然后用PowerShell命令创建也不行,bing ...

  2. 百度搜索URL参数你知道多少

    http://www.baidu.com/s?wd=关键字 wd(Keyword):查询的关键词: http://www.baidu.com/s?wd=关键字&cl=3 cl(Class):搜 ...

  3. windows下apk查看工具的原理

    游戏出了版本之后,提供给渠道,有部分渠道会修改包名(当他们内部系统做出调整后,可能会改包名),这个时候我又需要知道包名.之前没办法,试图反编译apk,发现失败了.然后就安装apk到手机上,手机上再下载 ...

  4. Android Activity启动流程源码全解析（2）

    接上之前的分析 ++Android Activity启动流程源码全解析(1)++ 1.正在运行的Activity调用startPausingLocked 一个一个分析,先来看看startPausing ...

  5. TK1 设置最大频率

    支持的值:cat /sys/kernel/debug/clock/gbus/possible_rates当前值:cat /sys/kernel/debug/clock/gbus/rate 设置最大值: ...

  6. Caffe的solver参数介绍

      版权声明:转载请注明出处,谢谢! https://blog.csdn.net/Quincuntial/article/details/59109447 1. Parameters solver.p ...

  7. UEFI与 Legacy BIOS两种启动模式详解

    (1). UEFI启动模式 与 legacy启动模式 legacy启动模式: 就是这么多年来PC一直在使用的启动方式(从MBR中加载启动程序),UEFI BIOS作为一种新的BIOS自然也应该兼容这种 ...

  8. Python/Shell 正则表达式与运用

    正则表达式用的地方是很多的.比如字符串处理过程中.最近遇到记录一下. 1. 比如在shell中 #!/bin/bash str="date:2017-11-28 os:centos blac ...

  9. 基于libnids的TCP数据流的还原(多线程实现) .

    我们知道,libnids本身可以实现TCP数据流的重组,但是如果一个TCP流数据量比较大的时候,就会分成好多个TCP报文段,这些报文段在网络中的传播可能是乱序的,利用libnids可以帮助我们按顺序接 ...

  10. solr建立pdf/word/excel索引的方法

    PS: 本文假设你已经成功的搭建了一个Solr服务器步骤如下:(1)准备好一份Solr的源码,假设现在保存在c:\apache-solr-1.4.1\目录下(2)从https://issues.apa ...