折线：

<!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. 【转】iPhone易被窃听应用三分钟即可获取所有信息

    2011年8月9日10:19 “你有iPhone吗?这下你麻烦了!”昨天香港<东方日报>封面文章用这样的语气报道说,一种iPhone等智能手机窃听程序,正引爆香港. 该报记者亲自试验,发现 ...

  2. vs2010 :0X80041FEB 程序集无法修改版等内容

    AssemblyInfo.cs内容被清空或则格式有问题,无法修改,一个问题搞了8个小时  gisoracle 2018.09.22 包括加入现在项目,加入form多,都不正常,不能显示,一次稍加几个

  3. JQuery攻略（四）事件

    jQuery事件处理,鼠标的单击,双击,悬停,键盘按键,文本动画..... 此章节有 1.1被点击的按钮查找 1.2事件的自动触发 1.3点击之后禁用按钮 1.4鼠标事件 1.5焦点事件 1.6CSS ...

  4. Node.js批量去除BOM文件

    之前的同事写了一个工具,但有bug,就是在替换文件后原文件的格式变成utf8 BOM了,这种带BOM的XML在Mac下可能读取不出来,所以就需要写个工具处理一下-   其实思路比较简单,首先遍历目录, ...

  5. Material Designer的低版本兼容实现（十三）—— ProgressBar

    进度条我们都很常见了,新的设计规范中提出了各式各样的进度条,本篇就会介绍大部分进度条的实现.实现方式和规范的示例图可能略有差异,还是那句话根据具体需求进行改变吧. PS:本文较长 参考文档:http: ...

  6. Django查询 – id vs pk

    当编写django查询时,可以使用id / pk作为查询参数. Object.objects.get(id=1) Object.objects.get(pk=1) pk代表主键(primary key ...

  7. 动态SQL（章节摘要）

    1,使用动态SQL能够在依赖对象不存在时创建子程序. 2.动态SQL主要利用EXECUTE IMMEDIATE语句运行DML,DDL,DCL等语句操作. 3,假设使用了绑定变量,则必须在EXECUTE ...

  8. JavaScript：sort() 方法

    ylbtech-JavaScript:sort() 方法 JavaScript sort() 方法 1. 定义和用法返回顶部 sort() 方法用于对数组的元素进行排序. 语法 arrayObject ...

  9. 有序数组每个数平方后，不同数字的个数？O(n)

    此乃一道笔试题,当时的确也做出来啦.(但是在细节上还是出错啦,对多次重复出现的数字可能会重复计数,没有记录上次删除的元素) 如题,有序数组,可以知道平方之后在两边的数据较大,中间的数据较小. 因此可以 ...

  10. [PowerShell Utils] Create a list of virtual machines based on configuration read from a CSV file in Hyper-V

    Hello everyone, this is the third post of the series. .   Background =============== In my solution, ...