欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-06-28 13:04:12
本文实例讲述了js+html5 canvas实现的简单绘制折线图效果。分享给大家供大家参考，具体如下： 1、实例代码：

本文实例讲述了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、运行效果图如下：

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

更多关于javascript相关内容感兴趣的读者可查看本站专题：《javascript图形绘制技巧总结》、《javascript图片操作技巧大全》、《javascript运动效果与技巧汇总》、《javascript切换特效与技巧总结》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript数学运算用法总结》

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

上一篇： 金融类软文怎么发布才是最佳宣传推广？

下一篇： 微信小程序 仿猫眼实现实例代码

推荐阅读