折线：

<!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. 【Centos】centos查看磁盘使用情况

    1.查看分区和磁盘 lsblk 查看分区和磁盘 2.查看空间使用情况 df -h 查看空间使用情况 3.分区工具查看分区信息 fdisk -l 分区工具查看分区信息 4.查看分区 cfdisk /de ...

  2. Oracle 专用模式（DEDICATED） 和 共享模式(SHARE)

    Oracle 是一门博大精深的技术.玩了2年的oracle,依旧还有很多知识点不清楚. 昨天群里的朋友提到了 DEDICATED 和 SHARE 两种模式. 不清楚,默默的做点功课了.从网上搜了点知识 ...

  3. .NET：不要使用扩展方法扩展Object对象。

    C#的扩展方法算是一种Minin(掺入)机制,掺入方法有其合理的使用场景,这里说说一种不好的使用场景(个人意见):不要使用扩展方法扩展Object对象.扩展Object会对所有类型的示例有侵入,特别是 ...

  4. 【C++】STL常用容器总结之五：双端队列deque

    6.双端队列deque 所谓的deque是”double ended queue”的缩写,双端队列不论在尾部或头部插入元素,都十分迅速.而在中间插入元素则会比较费时,因为必须移动中间其他的元素.双端队 ...

  5. Unity Shader-法线贴图（Normal）及其原理

    简介 以前经常听说“模型不好看啊,怎么办啊?”答曰“加法线”,”做了个高模,准备烘一下法线贴图”,“有的美术特别屌,直接画法线贴图”.....法线贴图到底是个什么鬼,当年天真的我真的被这个图形学的奇淫 ...

  6. SharePoint Online 创建和使用视图

    前言 本文介绍如何在Office 365中创建和使用视图. 正文 首先,解释一下什么是SharePoint站点视图,所谓视图,就是列表的一个呈现形式,包含特定的栏.排序.筛选.分组等特性,我们通常创建 ...

  7. linux下vi操作Found a swap file by the name

    当我在linux下用vi打开Test.java文件时 [root@localhost tmp]# vi Test.java 会出现如下信息: E325: ATTENTION Found a swap  ...

  8. java数字转换成文字方法

    public class IntToSmallChineseNumber { public static String ToCH(int intInput) { String si = String. ...

  9. [Web 前端] React高级教程（es6）——（2）对于Refs最新变动的理解

    cp : https://blog.csdn.net/liwusen/article/details/53384561 1.什么是ReactJS中的refs 在React中组件并不是真实的 DOM 节 ...

  10. MySQL到Greenplum迁移分析

    MySQL到Greenplum迁移分析 1 数据类型对比   MySQL PostgreSQL comments 数值类型 TINYINT SMALLINT gp中无zerofill属性及unsign ...