折线：

<!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. Java 数组的 12 个最佳方法

    1.  声明一个数组 String[] aArray = new String[5]; String[] bArray = {"a","b","c&q ...

  2. 【CentOS】centos7上查看服务开机启动列表

    centos7上查看服务开机启动列表 命令: systemctl list-unit-files; 点击回车,可以向下翻页查询

  3. 设计模式之代理模式之二(Proxy)

    from://http://www.cnblogs.com/xwdreamer/archive/2012/05/23/2515306.html 设计模式之代理模式之二(Proxy)   0.前言 在前 ...

  4. 泛泰A860（高通8064 cpu 1080p） 刷4.4专用中文recovery TWRP2.7.1.2版（三版通刷）

    欢迎关注泛泰非盈利专业第三方开发团队 VegaDevTeam  (本team 由 syhost suky zhaochengw(z大) xuefy(大星星) tenfar(R大师) loogeo cr ...

  5. Windows：chm 文件打开出现“已取消到该网页的导航”的解决方案

    症状 解决方案

  6. python测试开发django-16.JsonResponse返回中文编码问题

    前言 django查询到的结果,用JsonResponse返回在页面上显示类似于\u4e2d\u6587 ,注意这个不叫乱码,这个是unicode编码,python3默认返回的编码 遇到问题 接着前面 ...

  7. Curl操作Elasticsearch的常用方法

    Elasticsearch对于文档操作,提供了以下几种API,本文就说明如何使用curl方式来调用这些API. API种类 单文档操作API 1.* Index API 索引文档 * 为文档创建索引 ...

  8. HDOJ 4869 Turn the pokers

    最后的结果中正面向上的奇偶性是一定的,计算出正面向上的范围low,up 结果即为 C(m.low)+ C(m.low+2) +.... + C(m,up) ,用逆元取模 Turn the pokers ...

  9. SSI(Server Side Include)简单介绍

    Server-side include(server端包含) Server-side include(server端包含)是浏览器向server请求您的文档时并入您的文档的一个文件. 当訪问者浏览器请 ...

  10. iOS：创建带logol的二维码

    //二维码生成 实质: 把字符串转变为 图片 // 需要 coreImage框架, 已经包含在了 UIKit框架里面 //MARK: 二维码中间内置图片,可以是公司logo + (UIImage *) ...