html5 canvas 实现折线图

最新推荐文章于 2024-04-26 12:17:54 发布
最新推荐文章于 2024-04-26 12:17:54 发布
阅读量2.3k 收藏 6
点赞数 1
分类专栏： html5 文章标签： html5 canvas

效果图：
这里写图片描述

此效果难点：y轴是倒着走的。 其它思想与上一篇进度条的基本一样

htm代码：


<!DOCTYPE Html>
<html>
<head>
    <title>Line Chart Demo</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
</head>
<body>
    <div class="leftChart">
      <header>转诊人数统计（人次）</header>
      <section>
        <canvas id="canvas1">您的浏览器不支持canvas，请换高版本的浏览器！</canvas>
        <ul>
          <li><i style="background: #de6062;"></i><span>用户</span></li>
          <li><i style="background: #cbdbfe;"></i><span>血压</span></li>
          <li><i style="background: #537acf;"></i><span>血糖</span></li>
        </ul>
      </section>
    </div>
    <script type="text/javascript" src="chart.js"></script>
    <script>
      /*折线图*/
      var xkedu = [
          '1月','2月','3月','4月'
      ]
      var lineColors = [
          '#de6062',
          '#cbdbfe',
          '#537acf'
      ]
      var multiData = {values:[
          { value0:[
              {x:"1月1周",y:10},
              {x:"1月2周",y:10},
              {x:"1月3周",y:10},
              {x:"1月4周",y:10},
              {x:"2月1周",y:10},
              {x:"2月2周",y:20},
              {x:"2月3周",y:15},
              {x:"2月4周",y:10},
              {x:"3月1周",y:5},
              {x:"3月2周",y:0},
              {x:"3月3周",y:0},
              {x:"3月4周",y:0},
              {x:"3月1周",y:5},
              {x:"3月2周",y:0},
              {x:"3月3周",y:0},
              {x:"3月4周",y:0},
          ]},
          { value1:[
              {x:"1月1周",y:10},
              {x:"1月2周",y:15},
              {x:"1月3周",y:20},
              {x:"1月4周",y:25},
              {x:"2月1周",y:30},
              {x:"2月2周",y:20},
              {x:"2月3周",y:35},
              {x:"2月4周",y:40},
              {x:"3月1周",y:50},
              {x:"3月2周",y:60},
              {x:"3月3周",y:0},
              {x:"3月4周",y:10},
              {x:"3月1周",y:15},
              {x:"3月2周",y:0},
              {x:"3月3周",y:10},
              {x:"3月4周",y:5},
          ]},
          { value2:[
              {x:"1月1周",y:31},
              {x:"1月2周",y:40},
              {x:"1月3周",y:55},
              {x:"1月4周",y:65},
              {x:"2月1周",y:78},
              {x:"2月2周",y:50},
              {x:"2月3周",y:85},
              {x:"2月4周",y:50},
              {x:"3月1周",y:10},
              {x:"3月2周",y:40},
              {x:"3月3周",y:30},
              {x:"3月4周",y:60},
              {x:"3月1周",y:85},
              {x:"3月2周",y:0},
              {x:"3月3周",y:40},
              {x:"3月4周",y:10},
          ]}
        ] 
      }
     /*
      参考地址：http://www.108js.com/article/article7/70231.html?id=1365
      *@param0: canvas 的id
      *@param1: json 数据
      *@param2: 坐标距离画布的间隙padding
      *@param3: 每条线的颜色
      *@param4: 点的颜色
      *@param5: 是否绘制背景线
      *@param6: 是否是多条数据
      */
     //先定义数据线的名字，再绘制数据
      LineChart.setData("canvas1",multiData,30,lineColors,"#000",true,true,xkedu);   
    </script>
</body>
</html>

script：

// 折线图
var LineChart={
    setData:function(canId,data,padding,lineColors,dotColor,isBg,isMultiData, xkedu){
        this.lineColors = lineColors;
        this.dotColor = dotColor;
        this.can = document.getElementById(canId);
        this.ctx = this.can.getContext("2d");
        this.isBg = isBg;
        this.isMultiData = isMultiData;
        this.drawXY(data,0,padding,this.can,xkedu, lineColors);

    },
    //是否是多条数据线
    isMultiData:function(data){
        if(data.values.length>1){
          this.isMultiData = true;
        }
    },
    //绘制XY坐标值及坐标线 背景线
    drawXY:function(data,key,padding,can,xkedu, lineColors){
        this.ctx.font = '14px';
        var perwidth = 30;//x 轴每一个数据占据的宽度
        can.width = this.getCoordX(padding,perwidth,data.values[0].value0.length); //canvas的宽度
        var maxY =  this.getMax(data,0,this.isMultiData);//获得Y轴上的最大值
        var ylimt = this.getYLimtByMaxData(maxY).ylimt; // y轴 刻度
        var yPixel = this.getYPixel(maxY,can.height,padding, ylimt).pixel;  // y轴 刻度之间的间距
        can.height = yPixel * (ylimt.length - 1) + padding; // y轴图像真实的高度  解决：yPixel改变， 总体高度改变问题
        var yCanMove = 8; //整体向下走 解决到顶部的问题
        // // 一个x刻度对应4个值
        for( var i=0;i<xkedu.length;i++ ){
            var dotxlimt = this.getCoordX(padding,perwidth,2) - this.getCoordX(padding,perwidth,1); // 每个点之间横坐标的差值
            var x_x = perwidth + perwidth * 4 * i + padding;// x刻度的横坐标
            var x_y = can.height-padding+20 + yCanMove;
            this.ctx.fillStyle = '#fff';
            this.ctx.fillText(xkedu[i], x_x, x_y, 100);
        }
        // 每个x刻度对应着一个值
        // for( var i=0;i<data.values[key]["value"+key].length;i++ ){
        //   ptindex = i+1;
        //   var x_x = this.getCoordX(padding,perwidth,ptindex);
        //   var x_y = can.height-padding+20;
        //   this.ctx.fillText(data.values[key]["value"+key][i].x,x_x,x_y,perwidth);
        // }
        this.ctx.fillStyle = '#fff';
        this.ctx.textAlign = "right"//y轴文字靠右写
        this.ctx.textBaseline = "middle";//文字的中心线的调整
        for(var i=0;i<ylimt.length;i++){
            // y轴坐标 数值和坐标要倒着放
            var unit = this.getYLimtByMaxData(maxY).unit;
            this.ctx.fillText(ylimt[i],padding-10,ylimt[ylimt.length-1-i]/unit*yPixel + yCanMove);
            // 背景横线
            this.ctx.lineWidth="1";
            this.ctx.strokeStyle="#595e6b";
            var y = ylimt[ylimt.length-1-i]/unit*yPixel + yCanMove;
            this.ctx.moveTo(padding,y);
            this.ctx.lineTo(perwidth * (data.values[0].value0.length -1) + padding, y);
            this.ctx.lineJoin = 'round';
            this.ctx.stroke();
        }
        this.ctx.lineWidth="1";
        this.ctx.strokeStyle="#595e6b";// 刻度颜色
        this.ctx.beginPath();
        // 画y轴那条线
        this.ctx.moveTo(padding,yCanMove);
        this.ctx.lineTo(padding,can.height-padding + yCanMove);
        // 画右侧闭合那条线
        this.ctx.moveTo(perwidth * (data.values[0].value0.length -1) + padding, yCanMove);
        this.ctx.lineTo(perwidth * (data.values[0].value0.length -1) + padding,can.height-padding + yCanMove);
        this.ctx.stroke();
        this.ctx.closePath();
        this.drawData(data,0,padding,perwidth,yPixel,this.isMultiData,lineColors, unit, ylimt, can, yCanMove);
    },
    //绘制数据线和数据点
    drawData:function(data,key,padding,perwidth,yPixel,isMultiData,lineColors, unit, ylimt, can, yCanMove){
        if(!isMultiData){
            var keystr = "value"+key;
            this.ctx.beginPath();
            this.ctx.lineWidth="2";
            this.ctx.strokeStyle=lineColors;
            /*下面绘制数据线*/
            var startX = this.getCoordX(padding,perwidth,0);
            this.ctx.beginPath();
            this.ctx.lineWidth="3";
            for( var i=0;i<data.values[key][keystr].length;i++ ){
                var x = this.getCoordX(padding,perwidth,i);
                // y轴坐标计算：y轴总体的高度(can.height-padding) 减去 应该在的坐标  等于  显示在图上的坐标
                var y = can.height-padding - ((can.height-padding) * data.values[key][keystr][i].y / ylimt[ylimt.length -1]) + yCanMove;
                this.ctx.lineTo(x,y);
                this.ctx.lineJoin = 'round';
            }
            this.ctx.stroke();
            this.ctx.closePath();
            /*下面绘制数据线上的点*/
            this.ctx.beginPath();
            // this.ctx.fillStyle=this.dotColor;
            this.ctx.fillStyle = lineColors;
            for( var i=0;i<data.values[key][keystr].length;i++ ){
              // 圆点x轴开始的位置
              var x = this.getCoordX(padding,perwidth,i);
              var y = can.height-padding - ((can.height-padding) * data.values[key][keystr][i].y / ylimt[ylimt.length -1]) + yCanMove;
              this.ctx.moveTo(x,y);
              this.ctx.arc(x,y,2,0,Math.PI*2,true);//绘制数据线上的点
              this.ctx.fill();
            }
            this.ctx.closePath();
        }else{//如果是多条数据线
            for( var i=0;i<data.values.length;i++ ){
                LineChart.drawData(data,i,padding,perwidth,yPixel,false,lineColors[i],unit, ylimt, can, yCanMove);
            }
        }
    },
    //宽度
    getPixel:function(data,key,width,padding){
        var count = data.values[key]["value"+key].length;
        return (width-20-padding)/(count+(count-1)*1.5);    
    },
    //横坐标X 随ptindex 获得
    getCoordX:function(padding,perwidth,ptindex){//下标从1开始 不是从0开始
        return perwidth*ptindex+padding;
    },
    //y轴的之间间距
    getYPixel:function(maxY,height,padding, ylimt){
      return {pixel:(height-padding)/(ylimt.length-1)};
    },
    // 获取y轴刻度、unit  params：数据的最大值
    getYLimtByMaxData: function(maxY) {
      var ylimt = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
      // var ylimt = [0, 2, 4, 6, 8, 10];
      var unit = 10;
      if (maxY > 0 && maxY <= 10) {
        unit = 1;
      } else if(maxY <= 100) {
        unit = 10;
      } else if(maxY <= 1000) {
        unit = 100;
      } else if(maxY <= 10000) {
        unit = 1000;
      } else if(maxY <= 100000) {
        unit = 10000;
      } else{
        alert('最大数据值不在0至100000之间');
      }
      for (var i = 0; i < ylimt.length; i++) {
        ylimt[i] = ylimt[i] * unit;
      };
      return {ylimt:ylimt, unit:unit};
    },
    getMax:function(data,key,isMultiData){
        if(!isMultiData){
            var maxY = data.values[key]["value"+key][0].y;
            var length = data.values[key]["value"+key].length;
            var keystr = "value"+key;
            for( var i=1;i<length;i++ ){
                if(maxY<data.values[key][keystr][i].y) maxY=data.values[key][keystr][i].y;
            }
            return maxY;//返回最大值 如果不是多数据
        }else{
            var maxarr=[];
            var count = data.values.length;//多条数据的数据长度
            for(var i=0;i<count;i++){
                maxarr.push(LineChart.getMax(data,i,false));
            }
            var maxvalue = maxarr[0];
            for(var i=1;i<maxarr.length;i++){
                maxvalue = (maxvalue<maxarr[i])?maxarr[i]:maxvalue; 
            }
            return maxvalue;
        }//如果是多条数据
    }, 
}
奔跑14
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
2024年HTML5——Canvas图表插件 chart，牛逼
2401_85012088的博客
05-14 559
Chart.js有两种不同的版本。常规版本的Chart.js和 Chart.min.js，附带chart.js库的同时还带着颜色解析器。如果你想使用这个版本并且在你的图表中使用时间轴，你需要在安装Chart.js之前安装上Moment.js。而另一个版本Chart.bundle.js 和Chart.bundle.min.js早就包含了Moment.js。你唯一需要注意的就是两个版本只能安装一个，否则会引起错误。
怎么把HTML文档做成折线图,Highcharts 实现HTML页面多个折线图
weixin_39940901的博客
06-01 281
前言最近做项目的时候，产品说要在后台的首页放多折线图(不是多数据折线图)，但我上去网上找，基本是多数据折线图。例如： 同时换关键字也没什么可参考的。 多折线图实现找不到参考的，只能自己摸索。于是尝试将呈现折线图的HTML内容复制一遍。结果是——只显示一个折线图，控制台没有报错。 开始有些思路，产生问题的原因可能是：一、数据没有传过来；二、数据绑定的问题；三、一二问题同时有。最后发现一开始的HTML...
canvas 绘制折线图及思考
最新发布
violetjack的专栏
04-26 347
在学习了 G2 源码后，就想着自己写个 chart 加深理解。这次我是用的 G 来实现的。其实用原生的 canvas api 或者其他绘图库都是差不多的。重要是捋一下思路。
html语言制作折线图,HTML5 canvas绘制折线图(仿echarts)
weixin_34547883的博客
05-31 487
问题：Retina屏上字体线条模糊问题解决方案：放大canvas的大小，然后用css压缩回原大小，例如：想要900*400的画布，先将画布设置为 width="1800px" height="800px"，再用css {width: 900px;height: 400px;}压缩。canvas代码：echarts绘制var scale = 2;var canvas = document.getEl...
基于Echarts的HTML5 Canvas折线图DEMO演示
Pioneer
11-28 1276
HTML代码：  &lt;div id="lineChart" style="height: 400px;width:600px;background:white;margin:20px 0 0;"&gt;&lt;/div&gt; JavaScript代码：  // 绘制图表，准备数据 var lineChart = { dataZoom: { ...
JS+html5 canvas实现的简单绘制折线图效果示例
10-20
主要介绍了JS+html5 canvas实现的简单绘制折线图效果,结合实例形式分析了js结合HTML5 canvas技术实现图形绘制的数值运算与数组遍历等操作技巧,需要的朋友可以参考下
利用 html5 canvas 简单绘制折线图
继续去踢波的专栏
04-29 9776
利用 html5 canvas 简单绘制折线图
原生canvas实现折线图封装
07-01
在不依赖外部库如D3.js或Chart.js的情况下，我们可以使用HTML5的`canvas`元素来原生实现折线图。本篇文章将详细探讨如何使用JavaScript与canvas API来封装一个自定义的折线图组件。 首先，我们需要理解`canvas`的...
HTML5 Canvas 3D折线图表特效代码
03-20
HTML5 Canvas 3D折线图表是一款基于canvas的3D折线图表，图表在初始化的时候会根据数据点把折线分割成多条线段，然后线段将逐渐悬浮到数据点对应数值的位置。由于是3D的效果，所以图表的折线也和其他折线图表的不同...
HTML5 Canvas微信运动折线图特效特效代码
03-20
HTML5 Canvas微信运动折线图特效源码是一款基于HTML5 Canvas的微信运动折线图插件wcMotionChart的代码。这款插件是网友LipsonChan在工作过程中编写的。通过该插件你可以制作出某段时间内的动态折线图信息，非常有用...
HTML5 移动开发 -- Canvas 9.4 表格 ， 折线图
Men-DD
06-18 6969
表格                         (function (){         window.addEventListener("load", function(){           // 获取上下文           var a_canvas = document.getElementById('a_canvas');
44种动态/静态统计图（折线图）大集合基于html5 CSS3
12-03
44种统计图，什么网站统计，数据统计，动态折线图，静态图，饼状图，柱状图应有尽有，没有你想不到，只有你没看过的，基于html5，CSS3等技术，下载一次，受用一辈子！
前端------ canvas 绘制折线图详解
qq_39429962的博客
09-19 9460
canvas时html5新添加的一个画布标签。 他有很多属性，大家可以在下边网址查看： http://www.w3school.com.cn/tags/html_ref_canvas.asp 画布canvas中涉及到坐标运算，它是以浏览器空白左上角为起点，然后根据像素进行变化的一个元素，话不多说，下边是一个折线图的demo： 效果图如下： 源代码： &lt;!DOCTYPE ht...
html根据字段制作曲线图,canvas制作简单的HTML图表，折线或者矩形统计(原创)
weixin_34107887的博客
06-02 566
插件描述：canvas制作简单的HTML图表，折线或者矩形统计 使用canvas制作简单的HTML图表，折线或者矩形统计。使用canvas制作简单的HTML图表，折线或者矩形统计，简单而实用。图形由 Ctable类创建，类我已经写好了(如果有兴趣，可以自己看看源码)，直接引入使用。注意，这个类文件不依赖任何库(JQuery等)， Ctable.js 文件 点此在此 。具体使用方法如下：/*图表尺...
用html编写一幅简单的画,使用html5画简单的折线图
weixin_33923059的博客
06-07 412
//得到画布var can1=document.getElementByIdx_x_x_x("can");//得到画笔var cxt=can1.getContext("2d");//定义图表的数据，该方式为创建数组直接量的方式var sale_data=[80,92,104,110,68,50,45,90,74,98,103];//首先为背景进行设置渐变的效果,表示的是从(0,0)到(600,0)...
php 折线图canvas,JavaScript canvas绘制折线图
weixin_42097533的博客
03-12 137
本文实例为大家分享了canvas绘制折线图的具体代码，供大家参考，具体内容如下Titlecanvas {border: 1px solid #ccc;}/*1.构造函数*/var LineChart = function (ctx) {/*获取绘图工具*/this.ctx = ctx || document.querySelector('canvas').getContext('2d');/*画布...
canvas图表(2) - 折线图
weixin_30363981的博客
11-21 157
原文地址：canvas图表(2) - 折线图 话说这天气一冷啊, 就患懒癌, 就不想码代码, 就想着在床上舒舒服服看视频. 那顺便就看blender视频, 学习下3D建模, 如果学会了建3D模型, 那我的webGL技术就大有用处啊,可以独立开发小游戏了
html5画布画出折线图,canvas 画出动态折线图
weixin_28949743的博客
06-25 771
canvas 是 html5 支持的一个标签，用于图形的绘制。canvas 标签仅仅提供了图形的容器，必须通过 js 脚本来绘制。比如，绘制一个简单的矩形：矩形.pngvar c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.fillStyle="#FF0000";ctx.fillRect(0,0,150,75...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值