请选择 进入手机版 | 继续访问电脑版
设为首页收藏本站

QQ登录

只需一步,快速开始

新浪微博登陆

只需一步, 快速开始

切换风格 注册 找回密码

html5源码-html5教程网


查看: 28261|回复: 15

html5绘制折线图

[复制链接]

4

主题

0

听众

46

积分

新手上路

Rank: 1

贡献
0
金钱
2
发表于 2016-3-29 10:24:36 |显示全部楼层
html5绘制折线图详细代码
  1. <html>
  2. <canvas id="a_canvas" width="1000" height="700"></canvas>
  3. <script>
  4.      
  5.                (function (){

  6.         window.addEventListener("load", function(){

  7.           var data = [100,-1000,0,700];

  8.           // 获取上下文
  9.           var a_canvas = document.getElementById('a_canvas');
  10.           var context = a_canvas.getContext("2d");


  11.           // 绘制背景
  12.           var gradient = context.createLinearGradient(0,0,0,300);


  13.          // gradient.addColorStop(0,"#e0e0e0");
  14.           //gradient.addColorStop(1,"#ffffff");


  15.           context.fillStyle = gradient;

  16.           context.fillRect(0,0,a_canvas.width,a_canvas.height);

  17.          
  18.           // 描绘边框
  19.           var grid_cols = data.length + 1;
  20.           var grid_rows = 4;
  21.           var cell_height = a_canvas.height / grid_rows;
  22.           var cell_width = a_canvas.width / grid_cols;
  23.           context.lineWidth = 1;
  24.           context.strokeStyle = "#a0a0a0";

  25.           // 结束边框描绘
  26.           context.beginPath();
  27.           // 准备画横线
  28.          /*for (var col = 0; col <= grid_cols; col++) {
  29.             var x = col * cell_width;
  30.             context.moveTo(x,0);
  31.             context.lineTo(x,a_canvas.height);
  32.           }
  33.           // 准备画竖线
  34.           for(var row = 0; row <= grid_rows; row++){
  35.             var y = row * cell_height;
  36.             context.moveTo(0,y);
  37.             context.lineTo(a_canvas.width, y);
  38.           }*/
  39.             //划横线
  40.             context.moveTo(0,a_canvas.height/2);
  41.             context.lineTo(a_canvas.width,a_canvas.height/2);
  42.             
  43.             //画竖线
  44.           context.moveTo(0,0);
  45.             context.lineTo(0,a_canvas.height);
  46.          
  47.          
  48.           context.lineWidth = 1;
  49.           context.strokeStyle = "#c0c0c0";
  50.           context.stroke();

  51.           var max_v =0;
  52.          
  53.           for(var i = 0; i<data.length; i++){
  54.               var d=0;
  55.               if(data[i]<0)
  56.               {d=d-data[i];
  57.                   }
  58.                   else{d=data[i];};
  59.             if (d > max_v) { max_v =d};
  60.           }
  61.           max_v = max_v * 1.1;
  62.           // 将数据换算为坐标
  63.           var points = [];
  64.           for( var i=0; i < data.length; i++){
  65.             var v= data[i];
  66.             var px = cell_width * (i +1);
  67.             var py = a_canvas.height/2 - a_canvas.height*(v / max_v)/2;
  68.             points.push({"x":px,"y":py});
  69.           }
  70.           // 绘制折现
  71.           context.beginPath();
  72.           context.moveTo(points[0].x, points[0].y);
  73.           for(var i= 1; i< points.length; i++){
  74.             context.lineTo(points[i].x,points[i].y);
  75.           }


  76.           context.lineWidth = 2;
  77.           context.strokeStyle = "#8BA9FF";
  78.           context.stroke();

  79.           //绘制坐标图形
  80.           for(var i in points){
  81.             var p = points[i];
  82.             context.beginPath();
  83.             context.arc(p.x,p.y,4,0,2*Math.PI);
  84.             //实心圆
  85.            /*
  86.             context.fillStyle = "#000";*/
  87.             //空心圆
  88.             context.strokeStyle = "#000";
  89.             context.stroke();
  90.             context.fillStyle="white";
  91.             context.fill();
  92.           }
  93.           //添加文字
  94.           for(var i in points)
  95.           {  var p = points[i];
  96.             context.beginPath();
  97.             context.fillStyle="black";
  98.             context.fillText(data[i], p.x + 1, p.y - 15);
  99.                
  100.               }
  101.         },false);
  102.       })();

  103.       
  104. </script>
  105. </html>
复制代码
运行结果如下:

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册 新浪微博登陆

0

主题

0

听众

567

积分

高级会员

Rank: 4

贡献
0
金钱
523
发表于 2016-3-29 10:26:46 |显示全部楼层
实用贴,支持下
回复

使用道具 举报

0

主题

0

听众

7

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-3-30 00:23:51 |显示全部楼层
楼猪V5啊
回复

使用道具 举报

1

主题

0

听众

50

积分

注册会员

Rank: 2

贡献
0
金钱
1
发表于 2016-3-30 13:46:39 |显示全部楼层
好东西,我支持。。刚好要这两个工具
回复

使用道具 举报

0

主题

0

听众

19

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-3-31 13:35:15 |显示全部楼层
向楼主学习
回复

使用道具 举报

4

主题

0

听众

46

积分

新手上路

Rank: 1

贡献
0
金钱
2
发表于 2016-4-3 01:44:28 |显示全部楼层
佩服佩服!
回复

使用道具 举报

0

主题

0

听众

21

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-4-5 12:34:14 |显示全部楼层
看看真假。。。
回复

使用道具 举报

0

主题

0

听众

18

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-4-5 22:12:24 |显示全部楼层
大人,此事必有蹊跷!
回复

使用道具 举报

0

主题

0

听众

23

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-4-6 17:25:00 |显示全部楼层
鄙视楼下的顶帖没我快,哈哈
回复

使用道具 举报

0

主题

0

听众

48

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-4-6 19:52:38 |显示全部楼层
:lol
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册 新浪微博登陆



Archiver|手机版|     

HTML5教程网 Powered by Discuz! X2.5

© 2001-2012 Comsenz Inc.

回顶部