用html5绘制折线图的实例代码_html5教程技巧-H5教程-PHP中文網

首頁

web前端

H5教程

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

PHP中文网

Mar 30, 2017 pm 02:30 PM

html5繪製折線圖

用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）！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

H5和HTML5之間的連接：相似性和差異Apr 24, 2025 am 12:01 AM

H5和HTML5是不同的概念：HTML5是HTML的一個版本，包含新元素和API；H5是基於HTML5的移動應用開發框架。 HTML5通過瀏覽器解析和渲染代碼，H5應用則需要容器運行並通過JavaScript與原生代碼交互。

H5代碼的基礎：密鑰元素及其目的Apr 23, 2025 am 12:09 AM

HTML5的關鍵元素包括、、、、、等，用於構建現代網頁。 1.定義頭部內容，2.用於導航鏈接，3.表示獨立文章內容，4.組織頁面內容，5.展示側邊欄內容，6.定義頁腳，這些元素增強了網頁的結構和功能性。

HTML5和H5：了解常見用法Apr 22, 2025 am 12:01 AM

HTML5和H5沒有區別，H5是HTML5的簡稱。 1.HTML5是HTML的第五個版本，增強了網頁的多媒體和交互功能。 2.H5常用於指代基於HTML5的移動網頁或應用，適用於各種移動設備。

HTML5：現代網絡的基礎（H5）Apr 21, 2025 am 12:05 AM

HTML5是超文本標記語言的最新版本，由W3C標準化。 HTML5引入了新的語義化標籤、多媒體支持和表單增強，提升了網頁結構、用戶體驗和SEO效果。 HTML5引入了新的語義化標籤，如、、、等，使網頁結構更清晰，SEO效果更好。 HTML5支持多媒體元素和，無需第三方插件，提升了用戶體驗和加載速度。 HTML5增強了表單功能，引入了新的輸入類型如、等，提高了用戶體驗和表單驗證效率。

H5代碼：編寫清潔有效的HTML5Apr 20, 2025 am 12:06 AM

如何寫出乾淨高效的HTML5代碼？答案是通過語義化標籤、結構化代碼、性能優化和避免常見錯誤。 1.使用語義化標籤如、等，提升代碼可讀性和SEO效果。 2.保持代碼結構化和可讀性，使用適當縮進和註釋。 3.優化性能，通過減少不必要的標籤、使用CDN和壓縮代碼。 4.避免常見錯誤，如標籤未閉合，確保代碼有效性。