当前位置: 传客网 > 噢啦,html5实现数据折线图

噢啦,html5实现数据折线图

2017-01-11 作者:heart走走停停

<!DOCTYPE HTML>  
<html>  
<head>  
</head>  
<body>
<canvas id="t_canvas" width="300" height="300"></canvas>
</body>
<script type="text/javascript">
var uriage=[1,2,3,4,5,6,7,8,9,10,11,12,23,45,67,89,32];
drawChart(uriage);
function drawChart(data){
var canvas=document.getElementByIdx_x("t_canvas");
var ctx=canvas.getContext("2d");
//绘制背景
ctx.fill;
ctx.stroke;
ctx.lineWidth=1;
ctx.strokeRect(0,0,300,300);
ctx.fillRect(0,0,300,300);
//绘制方格线
var cols=data.length+1;
var rows=4;
var col_width=canvas.width/cols;
var col_height=canvas.height/rows;
ctx.lineWidth=1;
ctx.stroke;
ctx.beginPath();
for(var row=1;row<rows;row++){
ctx.moveTo(0,row*col_height);
ctx.lineTo(cols*col_width,row*col_height);
}
for(var col=1;col<cols;col++){
ctx.moveTo(col*col_width,0);
ctx.lineTo(col*col_width,rows*col_height);
}
ctx.closePath();
ctx.stroke();

//将数据转换成坐标的形式
//获取数据中的最大值
var max_v=0;
for(var i=0;i<data.length;i++){
if(data[i]>max_v){
max_v=data[i];
}
}
max_v=max_v*1.1;
//将数据转换成坐标
var points=[];
for(var i=0;i<data.length;i++){
var px=i*col_width+1;
var py=canvas.height-canvas.height*(data[i]/max_v);
points.push({"x":px,"y":py});
}
//绘制折线
ctx.stroke;
ctx.lineWidth=2;
ctx.beginPath();
ctx.moveTo(points[0].x,points[0].y);
for(var i=1;i<points.length;i++){
ctx.lineTo(points[i].x,points[i].y);
}
ctx.stroke();
//绘制圆点
for(var i in points){
ctx.beginPath();
var p=points[i];
ctx.arc(p.x,p.y,4,0,Math.PI*2,false);
ctx.fill;
ctx.fill();
}
}
</script>
</html>


相关推荐

  • 为什么需要TICK数据实现99%的回测数据数据

    为什么需要TICK数据原因是我们从MT4历史中心下载的数据,最小单位是M1分钟图,MT4通过插值算法模拟得出实时的Tick数据,而并非真实的Tick数据,这种数据一般来说对于盈利大于15点的EA问题不是很大,但是对于那些小于15点,甚至5个

  • 大数据实现商业价值的9种方法

    大数据实现商业价值的9种方法现在已经有了许多利用大数据获取商业价值的案例,我们可以参考这些案例并以之为起点,我们也可以从大数据中挖掘出更多的金矿。2013TDWI关于管理大数据的调查显示,89%的受访者认为大数据是一个机会,而在2011年的

  • 商业WIFI 用大数据实现“微”营销

    安商畅游商业智能WIFI,用大数据实现“微”营销。随着大众对免费WiFi的需求日益增加,WiFi的商业功能逐渐被开发出来。例如,通过免费WiFi吸引消费者关注微信公众号进行吸粉和宣传,用微信与实体店相结合的方式打通线上线下活动等方式,都是免

  • 百度:用大数据实现保险精准营销和优质用户识别

    摘要本文根据百度大数据部产品经理郭丽娜女士在平安产险·车主服务创新大会上的分享整理,本次会议由平安产险主办,汽车服务世界承办。导读:本文根据百度大数据部产品经理郭丽娜女士在平安产险·车主服务创新大会上的分享整理,本次会议由平安产险主办,汽车

  • 惠普姚翔:通过大数据实现大安全

    大数据作为存储、服务器领域的热词,如今蔓延到了安全领域。惠普、RSA、迈克菲、瞻博网络等厂商最近均发布新品,强调对安全的情景感知能力,这离不开基于对大数据的分析。先来讲一个案例,大家应该对前不久流传的“美国工程师用1/5薪水将工作外包给中国

  • C#中在WebClient中使用post发送数据实现方法

    privatevoidbutton2_Click(objectsender,EventArgse){WebClientclient=newWebClient();NameValueCollectionlist=newNameValueCol

  • 《数据重现:文件系统原理精解与数据恢复最佳实践》PDF格式绿色版下载,高速下载

    《数据重现:文件系统原理精解与数据恢复最佳实践》PDF格式绿色版软件标签:数据重现文件系统原理精解与数据恢复最佳实践软件授权:绿色版更新时间:2011-05-1808:05:19软件类型:国产软件软件大小:32.5MB软件语言:简体中文 应

  • 图吧导航(离线版)v5.9.5600306 VIP版----与宝马预装导航相同的导航地图数据

    ::软件简介::图吧导航(离线版)v5.9.5600306VIP版(炫酷3D效果!支持3D导航!支持3D地图!与宝马预装导航相同的导航地图数据)图吧导航(GPS离线)2014初夏版,是为驾车用户量身定做的一款纯离线导航,不消耗任何流量,有没

  • 如何实现上位机同时与两台DSP实现双向通信呢,若是基于CAN总线的话麻烦给个实现的流程图及详细的实现步

    如何实现上位机同时与两台DSP实现双向通信呢,若是基于CAN总线的话麻烦给个实现的流程图及详细的实现步骤。以电脑得装linux系统,请问选哪个linux最好?包括红旗、红帽、ubuntu……不知道我说的对不对?最好详细说一下。申明一点,没有

  • 可折叠的数据线:2张信用卡那么厚 不怕被掰弯

    当你准备要购买一个数据线的时候,你会考虑到哪些问题呢?速度一定要快?线材一定要结实?轻便好携带?价格非常便宜?在澳洲有一家名叫“Startup”的公司,在两年前就设计了一款数据线——LifeLink,当时设计师只告诉我们“这是一款可以折叠的

  • 教学反思(五)—折线统计图

    第二单元教学结束了。教材把单式折线图和复式折线图安排在同一个单元里教学。以前教学单式条形图和复式条形图是分开进行的,单式条形图在四年级教材里,复式条形图在五年级上册教材里。本单元在教学单式折线图以后立即教学复式折线图,是考虑到学生已有单式条

  • 微信小程序使用php连接后台服务器实现数据添加

    使用小程序连接后台实现数据添加这里以tp本地为例只要拿到json转化为数组任何服务器端语言都可实现数据添加想怎么加就怎么加具体json转化参考以下链接http://www.wxappclub.com/topic/758看图数据库里面的值增加

  • 特殊单式折线统计图

    第二课时特殊单式折线统计图教学内容:冀教版五年级下册教材84~85页教学目标:1.经历读稍复杂折线统计图、交流信息和进行简单预测的过程。2.能读懂稍复杂的单式统计图,能用折线统计图表示数据,能根据统计数据作出预测。3.体验用统计图描述数据的

  • 【15-16下】【五年级下册】第二单元 折线统计图

    备课人:王玉兰备课时间:2016.3.11教学时间:2016.3.14备课类型:详备第一课时单式折线统计图【学习内容】教科书第21~22页,例1、练一练,练习四第1题。【学习目标】1、让学生认识简单的折线统计图,了解折线统计图的结构,体会折

  • GPS 全球定位 数据底层处理实现全过程3(JAVA)

    其实写库这快大家都比较熟悉了,都操作过数据库,也应该明白了,这里就不多说了。只是这里用到了一些可能大家平时不太碰到的方法,因为数据量大,所以不可能有数据一来就开始连接数据库,开始Selectupdatedeleteinsert,一般处理不同

  • 一条线轻松实现两台计算机的数据对拷!

    相信许多购买了新电脑的朋友最头疼的事儿就是如何把旧电脑里的资料拷贝到新电脑里。因为,文件太大用移动硬盘实在麻烦,网络社交工具在线传送速度太慢,网线对拷既要求交叉线又搞不懂IP设置,难!难!难!那么,有没有一种简单又粗暴的方式可以实现电脑数据

  • 通过 Delphi实现 Java调用 Oracle数据库数据

    推荐文章Page1通过Delphi实现Java调用Oracle数据库数据----在开发WWW网络浏览软件中,时常要用到JAVA画一些生产管理图形,而且大量的图形数据存于网络数据库ORACLE中,现在常用的方法是使用JDBC来实现对数据库的操

  • 中国挪动通讯研讨院云盘算研究所所长孙少陵:实现BI体系集中化+数据模型尺度化-CSDN.NET

    这样的利益是首先通过粗放化实现数据的尺度化。第二,通过数据集中化来实现各系统的综合分析,同时也有利于快捷地进行数据分析和决策支持。由于现在良多的数据应当说是在二级、省内或者是地市体系里。现在假如从公司整体来说做数据分析和决策支持,往往是需要

  • 数据库索引的实现原理

    数据库索引,是数据库管理系统中一个排序的数据结构,以协助快速查询、更新数据库表中数据。索引的实现通常使用B树及其变种B+树。在数据之外,数据库系统还维护着满足特定查找算法的数据结构,这些数据结构以某种方式引用(指向)数据,这样就可以在这些数

  • 报表性能优化方案之多数据集实现层式报表

    1.问题描述若报表使用的数据量是上百万条的话,觉得报表展现的速度慢,可以使用层式报表来提高报表展现速度。但由层式报表章节可以得知,层式报表必须是单数据集,若是多数据集的模板且数据量又很大,想要提高报表的查询速度要如何实现呢?2.实现思路在定

返回
顶部