JS+html5 canvas实现的简单绘制折线图效果示例
本文实例讲述了JS+html5 canvas实现的简单绘制折线图效果。分享给大家供大家参考，具体如下：
1、实例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>画图</title>
<style>
#divContainer{
margin-top: 20px;
text-align: center;
}
#cv{
width: 300px;
height: 200px;
border-bottom: 2px solid #000;
border-left: 2px solid #000;
}
</style>
</head>
<body>
<div id="divContainer">
铝锭价走势图<br/>
<canvas id="cv">你的设备不支持图表数据显示</canvas>
</div>
<script>
(function(){
window.onload = function(){
//数据源
var dict = [
{x: "2015-04-24", y: 13400},
{x: "2015-04-25", y: 13380},
{x: "2015-04-26", y: 13370},
{x: "2015-04-27", y: 13370},
{x: "2015-04-28", y: 13380}
]
//数据源提取
var len = dict.length;
var xArr = [], yArr = [], tmp_yArr = [];
for(var i=0; i<len; i++){
xArr.push(i * 60);
tmp_yArr.push(dict[i].y);
}
var tmp_minY = Math.min.apply(Math, tmp_yArr);//最小值
var tmp_maxY = Math.max.apply(Math, tmp_yArr);//最大值
if(tmp_maxY - tmp_minY <= 100){
for(var i=0; i<len; i++){
yArr.push(tmp_yArr[i] - tmp_minY + 50);//与最小的做比较
}
}
else{//如果相差太大会导致图表不美观
for(var i=0; i<len; i++){
yArr.push(tmp_yArr[i] / 500);
}
}
var minY = Math.min.apply(Math, yArr);
var maxY = Math.max.apply(Math, yArr);
//canvas 准备
var canvas = document.getElementById("cv");//获取canvas画布
var ctx = canvas.getContext("2d");
//画折线
for(var i=0 ;i<len; i++){
var x = xArr[i];
var y = maxY - yArr[i] + minY;
if(i === 0){
ctx .moveTo(x, y);
}
else{
ctx .lineTo(x, y);
}
}
ctx .stroke();
//画点
for(var i=0; i<len; i++){
var x = xArr[i];
var y = maxY - yArr[i] + minY;
var xMemo = dict[i].x;
var yMemo = "¥" + dict[i].y;
ctx.beginPath();
ctx.fillStyle = "#000";
ctx.arc(x, y, 2, 0, 2*Math.PI);//画点
ctx.fill();
ctx.fillText(yMemo, x + 3, y - 10);
ctx.fillText(xMemo, x + 3, canvas.height - 10, 40);//画文字
}
}
})();
</script>
</body>
</html>
2、运行效果图如下：
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript图形绘制技巧总结》、《JavaScript图片操作技巧大全》、《JavaScript运动效果与技巧汇总》、《JavaScript切换特效与技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
three.js绘制地球、飞机与轨迹的效果示例
对于three.js不太熟悉的朋友们可以参考这篇文章,threejs官网:https://threejs.org/ 首先我们来看下要实现的效果 这个缩小后的图片,下面我们来看下近距离的动态效果.. 效果比较简陋,需要后期再处理... 下面进入主题,代码篇.. HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&
-
JS+Canvas绘制时钟效果
本文实例为大家分享了使用canvas绘制时钟的具体代码,供大家参考,具体内容如下 1. clock.html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Description" content=""> <title>canvas时钟</t
-
JavaScript html5 canvas绘制时钟效果
本文实例讲述了JavaScript+html5 canvas绘制时钟效果.分享给大家供大家参考,具体如下: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0
-
js HTML5 Canvas绘制转盘抽奖
本文实例为大家分享了js转盘抽奖的具体代码,供大家参考,具体内容如下 1.实现的基本效果 2.主要的内容 •html5中canvas标签的使用 •jQueryRotate.js旋转插件 3.主要html代码 <body> <div class="content"> <div class="wheel"> <canvas class="item" id="wheelCanvas" wi
-
javascript+HTML5 Canvas绘制转盘抽奖
之前做过的项目中,有需要抽奖转盘功能的.项目已经完工一段时间了,也没出现什么严重的bug,所以现在拎出来分享给大家. 功能需求 1.转盘要美观,转动效果流畅. 2.转盘上需要显示奖品图片,并且奖品是后台读取的照片和名字. 3.转动动画完成后要有相应提示. 4.获取的奖品具体算法在数据库里操作,前端只提供最后的效果展示. 知识要点 1.引用了一个jq插件:awardRotate,用来实现更智能化的转动(插件下载:http://www.jqcool.net/jquery-jqueryrotate.h
-
js+html5实现canvas绘制椭圆形图案的方法
本文实例讲述了js+html5实现canvas绘制椭圆形图案的方法,HTML5 canvas 没有画椭圆的方法,以下代码可以画出椭圆,分享给大家供大家参考,具体实现方法如下: 1.在一个隐式的画布 (将 其 CSS 定义成:display:none; ) 上画园. 2.将隐式画布的影像,以不同的宽高比值,画在另一个显式的画布,以使园变成椭圆. 3.进而,加进动画功能. <html> <head> <meta http-equiv="Content-Type"
-
js Canvas绘制圆形时钟效果
本文实例为大家分享了js Canvas圆形时钟的具体实现代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Canvas Clock</title> <style type="text/css"> div{ text-align: center; margin-top: 250px
-
基于d3.js实现实时刷新的折线图
先来看看效果图 下面直接上源代码,html文件 <html> <head> <meta charset="utf-8"> <title>实时刷新折线图</title> <style> .axis path, .axis line{ fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-seri
-
javascript绘制漂亮的心型线效果完整实例
本文实例讲述了javascript绘制漂亮的心型线效果实现方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>JS心型线</title> <style> div{ position:absolute; } .xx-box{ left:50%; top:50%;
-
js+html5实现canvas绘制网页时钟的方法
本文实例讲述了js+html5实现canvas绘制网页时钟的方法,画的是一个可用于网页的.带摆的钟表,可以通过按钮调整其大小和位置,具体实现内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Clock</title> <script type="tex
-
D3.js实现折线图的方法详解
前言 D3.js是一个帮助开发者操纵基于数据的文档的JavaScript类库,在<D3.js实现柱状图的方法详解>中已经给大家介绍过如何用D3.js来实现一个简单的柱状图了,今天我们来学习用D3.js来实现折线图,感兴趣的朋友们下面来一起看看吧. 折线图由坐标轴.线条和点组成.和实现柱状图一样,我们还是先把大概的画图框架搭起来,代码如下(别忘了添加D3.js): <!DOCTYPE html> <html lang="en"> <head>
-
js+canvas绘制矩形的方法
本文实例讲述了js+canvas绘制矩形的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm
-
JavaScript实现使用Canvas绘制图形的基本教程
由于这两年HTML5火的正热,所以研究了一下,最近有个想法也是要用到HTML的相关功能,所以也要好好学习一把. 好好看了一下Canvas的功能,感觉HTML5在客户端交互的功能性越来越强了,今天看了一下Canvas绘图,下边是几个实例,记下以备后用. 1.使用Canvas绘制直线: <!doctype html> <html> <head> <meta charset="UTF-8"> </head> <style ty