欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

用html5绘制折线图的实例代码

程序员文章站 2022-05-12 09:34:37
...
这篇文章主要介绍了关于用html5绘制折线图的实例代码,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

XML/HTML Code复制内容到剪贴板

  1. <html>
    <canvas id="a_canvas" width="1000" height="700"></canvas>
    <script>
                   (function (){    
            window.addEventListener("load", function(){    
              var data = [100,-1000,0,700];    
              // 获取上下文    
              var a_canvas = document.getElementById('a_canvas');    
              var context = a_canvas.getContext("2d");    
              // 绘制背景    
              var gradient = context.createLinearGradient(0,0,0,300);    
             // gradient.addColorStop(0,"#e0e0e0");    
              //gradient.addColorStop(1,"#ffffff");    
              context.fillStyle = gradient;    
              context.fillRect(0,0,a_canvas.width,a_canvas.height);    
              // 描绘边框    
              var grid_cols = data.length + 1;    
              var grid_rows = 4;    
              var cell_height = a_canvas.height / grid_rows;    
              var cell_width = a_canvas.width / grid_cols;    
              context.lineWidth = 1;    
              context.strokeStyle = "#a0a0a0";    
              // 结束边框描绘    
              context.beginPath();    
              // 准备画横线    
             /*for (var col = 0; col <= grid_cols; col++) {    
                var x = col * cell_width;    
                context.moveTo(x,0);    
                context.lineTo(x,a_canvas.height);    
              }    
              // 准备画竖线    
              for(var row = 0; row <= grid_rows; row++){    
                var y = row * cell_height;    
                context.moveTo(0,y);    
                context.lineTo(a_canvas.width, y);    
              }*/    
                //划横线    
                context.moveTo(0,a_canvas.height/2);    
                context.lineTo(a_canvas.width,a_canvas.height/2);    
                //画竖线    
              context.moveTo(0,0);    
                context.lineTo(0,a_canvas.height);    
              context.lineWidth = 1;    
              context.strokeStyle = "#c0c0c0";    
              context.stroke();    
              var max_v =0;    
              for(var i = 0; i<data.length; i++){    
                  var d=0;    
                  if(data[i]<0)    
                  {dd=d-data[i];    
                      }    
                      else{d=data[i];};    
                if (d > max_v) { max_v =d};    
              }    
              max_vmax_v = max_v * 1.1;    
              // 将数据换算为坐标    
              var points = [];    
              for( var i=0; i < data.length; i++){    
                var v= data[i];    
                var px = cell_width * (i +1);    
                var py = a_canvas.height/2 - a_canvas.height*(v / max_v)/2;    
                points.push({"x":px,"y":py});    
              }    
              // 绘制折现    
              context.beginPath();    
              context.moveTo(points[0].x, points[0].y);    
              for(var i= 1; i< points.length; i++){    
                context.lineTo(points[i].x,points[i].y);    
              }    
              context.lineWidth = 2;    
              context.strokeStyle = "#8BA9FF";    
              context.stroke();    
              //绘制坐标图形    
              for(var i in points){    
                var p = points[i];    
                context.beginPath();    
                context.arc(p.x,p.y,4,0,2*Math.PI);    
                //实心圆    
               /*    
                context.fillStyle = "#000";*/    
                //空心圆    
                context.strokeStyle = "#000";    
                context.stroke();    
                context.fillStyle="white";    
                context.fill();    
              }    
              //添加文字    
              for(var i in points)    
              {  var p = points[i];    
                context.beginPath();    
                context.fillStyle="black";    
                context.fillText(data[i], p.x + 1, p.y - 15);    
                  }    
            },false);    
          })();    
    </script>
    </html>

运行结果如下:

用html5绘制折线图的实例代码

相关推荐:

基于html5绘制圆形多角图案_html5教程技巧

以上就是用html5绘制折线图的实例代码的详细内容,更多请关注其它相关文章!

相关标签: html5 h5 代码