当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JS+html5 canvas实现的简单绘制折线图效果示例

JS+html5 canvas实现的简单绘制折线图效果示例

2019年06月11日  | 移动技术网IT编程  | 我要评论

本文实例讲述了js+html5 canvas实现的简单绘制折线图效果。分享给大家供大家参考，具体如下：

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">你的设备不支持图表数据显示</canvas>
    </div>
    <script>
      (function(){
        window.onload = function(){
          //数据源
          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}
          ]
          //数据源提取
          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数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript数学运算用法总结》

希望本文所述对大家javascript程序设计有所帮助。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网