亚洲免费乱码视频,日韩 欧美 国产 动漫 一区,97在线观看免费视频播国产,中文字幕亚洲图片

      1. <legend id="ppnor"></legend>

      2. 
        
        <sup id="ppnor"><input id="ppnor"></input></sup>
        <s id="ppnor"></s>

        用html5繪制折線圖的實(shí)例代碼

        字號(hào):


            下面小編就為大家?guī)硪黄胔tml5繪制折線圖的實(shí)例代碼。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家。也給大家一個(gè)參考。
            XML/HTML Code
            <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";    
                      // 結(jié)束邊框描繪    
                      context.beginPath();    
                      // 準(zhǔn)備畫橫線    
                     /*for (var col = 0; col <= grid_cols; col++) {    
                        var x = col * cell_width;    
                        context.moveTo(x,0);    
                        context.lineTo(x,a_canvas.height);    
                      }    
                      // 準(zhǔn)備畫豎線    
                      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;    
                      // 將數(shù)據(jù)換算為坐標(biāo)    
                      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});    
                      }    
                      // 繪制折現(xiàn)    
                      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();    
                      //繪制坐標(biāo)圖形    
                      for(var i in points){    
                        var p = points[i];    
                        context.beginPath();    
                        context.arc(p.x,p.y,4,0,2*Math.PI);    
                        //實(shí)心圓    
                       /*    
                        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>  
            運(yùn)行結(jié)果如下:
            名單
            以上這篇用html5繪制折線圖的實(shí)例代碼就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考