欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS+html5 canvas實現(xiàn)的簡單繪制折線圖效果示例

 更新時間:2017年03月13日 10:23:31   作者:繼續(xù)去踢波  
這篇文章主要介紹了JS+html5 canvas實現(xiàn)的簡單繪制折線圖效果,結合實例形式分析了js結合HTML5 canvas技術實現(xiàn)圖形繪制的數(shù)值運算與數(shù)組遍歷等操作技巧,需要的朋友可以參考下

本文實例講述了JS+html5 canvas實現(xiàn)的簡單繪制折線圖效果。分享給大家供大家參考,具體如下:

1、實例代碼:

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>畫圖</title>
    <style>
      #divContainer{
        margin-top: 20px;
        text-align: center;
      }
      #cv{
        width: 300px;
        height: 200px;
        border-bottom: 2px solid #000;
        border-left: 2px solid #000;
      }
    </style>
  </head>
  <body>
    <div id="divContainer">
      鋁錠價走勢圖<br/>
      <canvas id="cv">你的設備不支持圖表數(shù)據(jù)顯示</canvas>
    </div>
    <script>
      (function(){
        window.onload = function(){
          //數(shù)據(jù)源
          var dict = [
            {x: "2015-04-24", y: 13400},
            {x: "2015-04-25", y: 13380},
            {x: "2015-04-26", y: 13370},
            {x: "2015-04-27", y: 13370},
            {x: "2015-04-28", y: 13380}
          ]
          //數(shù)據(jù)源提取
          var len = dict.length;
          var xArr = [], yArr = [], tmp_yArr = [];
          for(var i=0; i<len; i++){
            xArr.push(i * 60);
            tmp_yArr.push(dict[i].y);
          }
          var tmp_minY = Math.min.apply(Math, tmp_yArr);//最小值
          var tmp_maxY = Math.max.apply(Math, tmp_yArr);//最大值
          if(tmp_maxY - tmp_minY <= 100){
            for(var i=0; i<len; i++){
              yArr.push(tmp_yArr[i] - tmp_minY + 50);//與最小的做比較
            }
          }
          else{//如果相差太大會導致圖表不美觀
            for(var i=0; i<len; i++){
              yArr.push(tmp_yArr[i] / 500);
            }
          }
          var minY = Math.min.apply(Math, yArr);
          var maxY = Math.max.apply(Math, yArr);
          //canvas 準備
          var canvas = document.getElementById("cv");//獲取canvas畫布
          var ctx = canvas.getContext("2d");
          //畫折線
          for(var i=0 ;i<len; i++){
            var x = xArr[i];
            var y = maxY - yArr[i] + minY;
            if(i === 0){
              ctx .moveTo(x, y);
            }
            else{
              ctx .lineTo(x, y);
            }
          }
          ctx .stroke();
          //畫點
          for(var i=0; i<len; i++){
            var x = xArr[i];
            var y = maxY - yArr[i] + minY;
            var xMemo = dict[i].x;
            var yMemo = "¥" + dict[i].y;
            ctx.beginPath();
            ctx.fillStyle = "#000";
            ctx.arc(x, y, 2, 0, 2*Math.PI);//畫點
            ctx.fill();
            ctx.fillText(yMemo, x + 3, y - 10);
            ctx.fillText(xMemo, x + 3, canvas.height - 10, 40);//畫文字
          }
        }
      })();
    </script>
  </body>
</html>

2、運行效果圖如下:

更多關于JavaScript相關內容感興趣的讀者可查看本站專題:《JavaScript圖形繪制技巧總結》、《JavaScript圖片操作技巧大全》、《JavaScript運動效果與技巧匯總》、《JavaScript切換特效與技巧總結》、《JavaScript錯誤與調試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結

希望本文所述對大家JavaScript程序設計有所幫助。

相關文章

  • js控制元素顯示在屏幕固定位置及監(jiān)聽屏幕高度變化的方法

    js控制元素顯示在屏幕固定位置及監(jiān)聽屏幕高度變化的方法

    這篇文章主要介紹了js控制元素顯示在屏幕固定位置及監(jiān)聽屏幕高度變化的方法,涉及javascript針對頁面元素及樣式屬性的相關操作技巧,需要的朋友可以參考下
    2015-08-08
  • js下載文件并修改文件名

    js下載文件并修改文件名

    這篇文章主要為大家詳細介紹了js下載文件并修改文件名的代碼,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-05-05
  • JavaScript實現(xiàn)簡單圖片切換

    JavaScript實現(xiàn)簡單圖片切換

    這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡單圖片切換,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-04-04
  • 使用非html5實現(xiàn)js板連連看游戲示例代碼

    使用非html5實現(xiàn)js板連連看游戲示例代碼

    連連看游戲通常情況下都是使用html5來實現(xiàn)的,不過從現(xiàn)在開始就可以使用js來實現(xiàn)了,具體的代碼如下,喜歡的朋友可以參考下,希望對大家有所幫助
    2013-09-09
  • postMessage及webSocket跨域方案詳解

    postMessage及webSocket跨域方案詳解

    這篇文章主要為大家介紹了postMessage及webSocket跨域方案詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-10-10
  • 教你修改element-ui源碼給el-dialog添加全屏功能

    教你修改element-ui源碼給el-dialog添加全屏功能

    el-dialog組件提供了fullscreen功能,但是無法滿足業(yè)務需求。系統(tǒng)使用了許多dialog,不方便重新封裝dialog組件,故直接對源碼進行修改,這篇文章主要介紹了修改element-ui源碼給el-dialog添加全屏功能,需要的朋友可以參考下
    2022-11-11
  • javascript數(shù)組組合成字符串的腳本

    javascript數(shù)組組合成字符串的腳本

    javascript數(shù)組組合成字符串的腳本...
    2007-11-11
  • 調用innerHTML之后onclick失效問題的解決方法

    調用innerHTML之后onclick失效問題的解決方法

    調用innerHTML之后,onclick失效了,這也是在意料之中的,因為innerHTML是以文本形式插入的button,所以無法識別onclick事件
    2014-01-01
  • 用JavaScript計算在UTF-8下存儲字符串占用字節(jié)數(shù)

    用JavaScript計算在UTF-8下存儲字符串占用字節(jié)數(shù)

    想辦法在JavaScript中判斷在UTF-8下存儲的String的字節(jié)數(shù),在網(wǎng)上找到很多關于Unicode介紹的文檔,最重要的是字符編碼數(shù)值對應的存儲長度
    2013-08-08
  • 如何理解JavaScript模塊化

    如何理解JavaScript模塊化

    模塊化簡單來說就是將一個完整的長篇代碼文件根據(jù)功能進行劃分成幾個文件,這些文件各自負責一個獨立的功能,各個文件組合起來實現(xiàn)一個完整的大功能,這就是模塊化,每個負責獨立功能的文件就是模塊。
    2021-05-05

最新評論