• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营

    • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    用html5绘制折线图的实例代码
    XML/HTML Code复制内容到剪贴板
    1. <html>    
    2. <canvas id="a_canvas" width="1000" height="700"></canvas>    
    3. <script>    
    4.          
    5.                (function (){    
    6.      
    7.         window.addEventListener("load", function(){    
    8.      
    9.           var data = [100,-1000,0,700];    
    10.      
    11.           // 获取上下文    
    12.           var a_canvas = document.getElementById('a_canvas');    
    13.           var context = a_canvas.getContext("2d");    
    14.      
    15.      
    16.           // 绘制背景    
    17.           var gradient = context.createLinearGradient(0,0,0,300);    
    18.      
    19.      
    20.          // gradient.addColorStop(0,"#e0e0e0");    
    21.           //gradient.addColorStop(1,"#ffffff");    
    22.      
    23.      
    24.           context.fillStyle = gradient;    
    25.      
    26.           context.fillRect(0,0,a_canvas.width,a_canvas.height);    
    27.      
    28.               
    29.           // 描绘边框    
    30.           var grid_cols = data.length + 1;    
    31.           var grid_rows = 4;    
    32.           var cell_height = a_canvas.height / grid_rows;    
    33.           var cell_width = a_canvas.width / grid_cols;    
    34.           context.lineWidth = 1;    
    35.           context.strokeStyle = "#a0a0a0";    
    36.      
    37.           // 结束边框描绘    
    38.           context.beginPath();    
    39.           // 准备画横线    
    40.          /*for (var col = 0; col <= grid_cols; col++) {    
    41.             var x = col * cell_width;    
    42.             context.moveTo(x,0);    
    43.             context.lineTo(x,a_canvas.height);    
    44.           }    
    45.           // 准备画竖线    
    46.           for(var row = 0; row <= grid_rows; row++){    
    47.             var y = row * cell_height;    
    48.             context.moveTo(0,y);    
    49.             context.lineTo(a_canvas.width, y);    
    50.           }*/    
    51.             //划横线    
    52.             context.moveTo(0,a_canvas.height/2);    
    53.             context.lineTo(a_canvas.width,a_canvas.height/2);    
    54.                  
    55.             //画竖线    
    56.           context.moveTo(0,0);    
    57.             context.lineTo(0,a_canvas.height);    
    58.              
    59.              
    60.           context.lineWidth = 1;    
    61.           context.strokeStyle = "#c0c0c0";    
    62.           context.stroke();    
    63.      
    64.           var max_v =0;    
    65.               
    66.           for(var i = 0; i<data.length; i++){    
    67.               var d=0;    
    68.               if(data[i]<0)    
    69.               {dd=d-data[i];    
    70.                   }    
    71.                   else{d=data[i];};    
    72.             if (d > max_v) { max_v =d};    
    73.           }    
    74.           max_vmax_v = max_v * 1.1;    
    75.           // 将数据换算为坐标    
    76.           var points = [];    
    77.           for( var i=0; i < data.length; i++){    
    78.             var v= data[i];    
    79.             var px = cell_width *　(i +1);    
    80.             var py = a_canvas.height/2 - a_canvas.height*(v / max_v)/2;    
    81.             points.push({"x":px,"y":py});    
    82.           }    
    83.           // 绘制折现    
    84.           context.beginPath();    
    85.           context.moveTo(points[0].x, points[0].y);    
    86.           for(var i= 1; i< points.length; i++){    
    87.             context.lineTo(points[i].x,points[i].y);    
    88.           }    
    89.      
    90.      
    91.           context.lineWidth = 2;    
    92.           context.strokeStyle = "#8BA9FF";    
    93.           context.stroke();    
    94.      
    95.           //绘制坐标图形    
    96.           for(var i in points){    
    97.             var p = points[i];    
    98.             context.beginPath();    
    99.             context.arc(p.x,p.y,4,0,2*Math.PI);    
    100.             //实心圆    
    101.            /*    
    102.             context.fillStyle = "#000";*/    
    103.             //空心圆    
    104.             context.strokeStyle = "#000";    
    105.             context.stroke();    
    106.             context.fillStyle="white";    
    107.             context.fill();    
    108.           }    
    109.           //添加文字    
    110.           for(var i in points)    
    111.           {  var p = points[i];    
    112.             context.beginPath();    
    113.             context.fillStyle="black";    
    114.             context.fillText(data[i], p.x + 1, p.y - 15);    
    115.                    
    116.               }    
    117.         },false);    
    118.       })();    
    119.      
    120.            
    121. </script>    
    122. </html>  

    运行结果如下：

    以上这篇用html5绘制折线图的实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

    原文地址：http://www.cnblogs.com/shuniuniu/archive/2016/03/25/5318717.html

    上一篇：详解HTML5 Canvas绘制时指定颜色与透明度的方法
    下一篇：html5生成柱状图(条形图)效果的实例代码
  • 相关文章
    • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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