vue和svg（一），用svg画出带坐标系的进度条

在我现在的项目中，因为业务的需要，使用了vue加svg的方式来对前端进行重构，现在项目基本完成了，想趁这个时机把项目做一个总结，当中大致包含，vue及一些vue组件，element ui，svg等，将在后续的博客中相应写出。想到哪里就写到哪里，如果大家有特别想看的，可以留言，一起探讨，一起进步吧！由简到繁，我们就从用svg画出一个进度条说起吧。(大牛可以略过了…)
现在有很多在前端中有众多基JavaScript的图形绘制库，如D3，uvCharts等等。

这里我没有引用这些JS库，而是想自己画出来，因为感觉画这个太简单了，而且svg本身兼容性非常好，而且入门非常简单。如上的图形中，使用的代码非常少。我们需要做的事情仅仅是：
1 找出图形的边界，计算好比例尺（ps：这里先忽略视口和viewBox的比例，所有图形单位都是px，之后的示例中，会陆续介绍viewBox，和其他单位）。比如我这个，进度条的边界是24小时，那我需要知道我的进度条上边的最小单位是min还是second，我这里是分钟，那么，进度条最长为24 * 60，假如我们要把它放在1440的画布中，那就比较好算了：1min 对应画布中1的长度
新建画布:

<svg height='110px' width='1440px' xmlns="http://www.w3.org/2000/svg">svg>

2 得出svg的总宽度之后，我们就要考虑要显示的进度条在当前比例尺（1:1）下显示情况了。现在如果要把一个长度2h30mins的时间显示在svg中，我们首先应该做如下转换
current_time = 2 * 60 + 30

<rect width="150px" height="30px" y='30' style="fill:#fdd835;" x='0'/>

这时，一个2h30mins的矩形已经在图形中展示出来了。
3 座标尺。画坐标尺的方式也很方便，因为我们的比例尺已经定为1:1了，我们只需要画出一条横的线段代表x轴，然后在每小时画一个很小的纵向线段，那么锯齿型的坐标轴也就画出来了。这个就不贴例子了，有兴趣的同学自己思考一下。
有了横向坐标轴，那么纵向的坐标轴也就不难了，综合来说，在这里我们只用到了两个元素，矩形（rect），直线（line）和一些简单的计算，就画出了一个带坐标体系的进度条。欢迎大家批评指正，下一篇介绍svg中实现图形拖拽。

应同学们需求，贴出svg部分的代码

<svg height='110px' v-bind:width='getWholeLine(session.start_time, session.end_time) + 60' xmlns="http://www.w3.org/2000/svg"> <g v-for='operating in session.operating'><rect v-bind:width="getWidth(operating.start_time, operating.end_time)" v-bind:x='getMyX(operating.start_time, session.start_time)' height="30px" style="fill:#616161;"/> <rect v-for='onlineting in operating.online' v-bind:width="getWidth(onlineting.start_time, onlineting.end_time)" height="30px" y='30'style="fill:#fdd835;" v-bind:x='getMyX(onlineting.start_time, session.start_time)'/>g> <line x1='0' y1='90' v-bind:x2='getWholeLine(session.start_time, session.end_time)' y2='90' style='stroke: black; fill: none;'/>  <g> <line v-for='point in getTimeLine(session.start_time, session.end_time)' v-bind:x1='point.pointx' y1='85' v-bind:x2='point.pointx' y2='90' style='stroke: black; stroke-width:2px; fill: none;'/> <text v-for='point in getTimeLine(session.start_time, session.end_time)' v-bind:x='point.pointx' y="105" style='fill:#616161; font-size:8px'>{{point.d_hour}}text> g> svg> 

里面嵌套了vue的代码，贴出一些关键方法如下：

 getWidth: function(start_time, end_time) {
      var start_time = parseInt(start_time)
      var end_time = parseInt(end_time)
      return (start_time < end_time ? end_time - start_time : (1440-start_time) + end_time) * this.scale
    },
    getMyX: function(end_time, s_start_time) {
      var end_time = parseInt(end_time)
      var s_start_time = parseInt(s_start_time)
      return (s_start_time <= end_time ? end_time - s_start_time : (1440-s_start_time) + end_time) * this.scale
    },
    getWholeLine: function(start_time, end_time) {
      var end_time = parseInt(end_time)
      var start_time = parseInt(start_time)
      return (start_time <= end_time ? end_time - start_time : (1440-start_time) + end_time) * this.scale
    },
    getTimeLine: function(start_time, end_time) {
      var end_time = parseInt(end_time)
      var start_time = parseInt(start_time)
      var time_length = Math.floor((end_time - start_time) / 60);
      var points = []
      for (var i = 0; i < time_length + 1; i++) {
        var i_start = Math.ceil((start_time + i * 60) / 60)
        var i_hour = i_start * 60 
        var i_start_point = (i_hour - start_time) * this.scale
        if (i_hour >= 720){
          i_start -= 12
          var i_d = ':00 pm'
        }
        if (i_hour > 2160){
          i_start -= 24
          var i_d = ':00 pm'
        }
        if (i_hour < 720 || (i_hour >= 1440 && i_hour <= 2160)) {
          var i_d = ':00 am'
        }
        i_start = i_start > 12 ? i_start - 12 : i_start 
        i_start = i_start == 0 ? 12 : i_start 
        var point = {pointx: i_start_point, d_hour: i_start + i_d}
        points.push(point)
      }
      return points
    },

剩下的就是一些 数据获取和参数定义，大家自己补充一下吧