Home > Article > Web Front-end > 用html5绘制折线图的实例代码_html5教程技巧

用html5绘制折线图的实例代码_html5教程技巧

PHP中文网Original: 2017-03-30 14:30:124321browse

用html5绘制折线图的实例代码_html5教程技巧

<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(&#39;a_canvas&#39;);    
          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教程技巧的内容，更多相关内容请关注PHP中文网（www.php.cn）！

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例_html5教程技巧Next article：HTML5单页面手势滑屏切换原理 _html5教程技巧

See more

用html5绘制折线图的实例代码_html5教程技巧

Related articles