噢啦,html5实现数据折线图

html5 折线图 数据显示

<!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看图数据库里面的值增加

你的评论

就没有什么想说的吗?

最新博客

关于我们 加入传客 媒体报道 帮助中心 传客活动 免责声明 联系我们 移动版 移动应用

©2017传客网    琼ICP备15003173号-2    

本站部分文章来源于互联网,版权归属于原作者。
本站所有转载文章言论不代表本站观点,如是侵犯了原作者的权利请发邮件联系站长(weishubao@126.com),我们收到后立即删除。
站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!

X