不借助Echarts等图形框架原生JS快速实现折线图效果

__ihhu · 掘金 · 前端 · 2018-05-25 05:25

正文

这篇文章发布于 2018年05月25日，星期五，02:01，归类于 js实例。阅读 504 次, 今日 330 次

by zhangxinxu from www.zhangxinxu.com/wordpress/?…
本文可全文转载，但需得到原作者书面许可，同时保留原作者和出处，摘要引流则随意。

一、折线图效果预览

例如下图所示的折线图效果实现就很简单：

调用下面这段JS代码中的方法就好了：

/**
* @description 点连成线方法
**/
var fnLineChart = function (eleDots) {
    [].slice.call(eleDots).forEach(function (ele, index) {
        var eleNext = eleDots[index + 1];
        if (!eleNext) { return;  }
        var eleLine = ele.querySelector('i');
        if (!eleLine) {
            eleLine = document.createElement('i');
            eleLine.setAttribute('line', '');
            ele.appendChild(eleLine);
        }
        // 记录坐标
        var boundThis = ele.getBoundingClientRect();
        // 下一个点的坐标
        var boundNext = eleNext.getBoundingClientRect();
        // 计算长度和旋转角度
        var x1 = boundThis.left, y1 = boundThis.top;
        var x2 = boundNext.left, y2 = boundNext.top;
        // 长度
        var distance = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
        // 角度
        var radius = Math.atan((y2 - y1) / (x2 - x1));
        // 设置线条样式
        eleLine.style.width = distance + 'px';
        eleLine.style.msTransform = 'rotate('+ radius +'rad)';
        eleLine.style.transform = 'rotate('+ radius +'rad)';
    });
};

假设页面上需要连接的所有点元素集合是 eleDots ，则页面上执行下 fnLineChart(eleDots) 效果就出来了。

当然，这段JS只处理长度和角度这两个动态属性，其他固定的样式还需要CSS配合，例如，线条的粗细和线条颜色，例如下面这个粗细2像素的绿色折线，可以这样：

i[line] {
  position: absolute;
  border-top: 2px solid green;
}

您可以狠狠地点击这里：简单HTML和JS代码绘制折线图demo

二、斜线效果实现的原理

1. 计算两点之间的直线长度

这个应该属于初中或者高中时候的知识，勾股定理，a^2 + b^2 = c^2，直线长度实际上就是 c ，而 a , b 则是两个点的横坐标距离和纵坐标距离，假设直线前后两个点的坐标分别是 (x1, y1) 和 (x2, y2) ，则直线长度为：

Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1))

2. 计算两点之间的弧度或角度

这个也是属于初中或者高中时候的知识，已知两个直角边的长度，求 y 边的对角角度，我们可以使用 Math.atan() 方法计算出弧度，CSS3中有专门的弧度单位 rad ，就是用来给旋转使用的，于是我们可以直接设置：

eleLine.style.transform = 'rotate('+ Math.atan((y2 - y1) / (x2 - x1)) +'rad)'

我们的线条就旋转了。有些小伙伴习惯使用角度 deg ，也是可以的，借助 Math.PI 常量再转换下，代码如下：

eleLine.style.transform = 'rotate('+ 180 / Math.PI * Math.atan((y2 - y1) / (x2 - x1)) +'deg)'

3. 设置transform-origin变换点

这一步很重要是不可或缺的，否则线条的位置会有问题，就是我们需要设置线条旋转的变换点是左边缘居中位置，如下CSS代码：

i[line] {
  transform-origin: left center;
}

于是乎，我们就可以画出两点之间的斜线效果了。

因此，要实现折线图图表效果，步骤下面这样：

点元素在页面上写好；
设置线颜色、粗细和变换点位置；
套用 fnLineChart() 方法；

如果希望移到点元素上有黑色tips信息提示，可以使用LuLu UI中的 tips提示方法，如果结构合理，纯CSS就可以实现。

三、简单的图表效果没必要使用框架

本文demo展示折线斜线图表效果，所使用JS代码就寥寥几十行，而且以后也可以复用，代码量几乎可以不值一提。但是，如果就为了这一个小小的功能，而引入一个巨大的 Highcharts 或者 Echarts JS文件就成本有些大，而且UI定制这一块也不如手动写写样式来得快。

简单的图表效果完全没必要使用框架，纯手写手写正好还可以锻炼自己的基本功。

以前介绍过如何使用CSS3实现饼图效果，可以参见“ CSS3实现饼图loading效果 ”这篇文章。

也是可以纯传统DOM实现，无需借助SVG或canvas技术。

图表框架什么时候使用合适呢？

图表很多很复杂的时候；
对UI无定制要求的时候；
流量不用在乎的时候；
自己水平不行，原生那套驾驭不来的时候；
项目以后可能小白接手的时候；
领导让你用的时候；
自己想趁机学习图表框架的时候；
想让设计师大吃一惊的时候；
想让产品经理大吃一惊的时候；
想让老板大吃一惊的时候；
想在自己女朋友面前炫技的时候，哦，你还没女朋友，那这条不算。

嘛嘛嘛，就扯这些吧。

感谢您花费宝贵的阅读本文，我觉得应该要真感谢，要不搞个竞猜活动？可以有！！哈哈哈哈！！第一个竞猜正确的人我免费送一本《CSS世界》签名版。

截止6月1日晚上12点，京东自营《CSS世界》的评论数是？
A. 4400+ B. 4500+ C. 4600+ D. 4700+或更高
下周我会去下面哪家公司做交流？
A. 腾讯上海 B. 京东上海 C. 百度上海 D. B站
上周末公司团建我去的是下面哪个城市？
A. 苏州 B. 无锡 C. 南京 D. 扬州
下周四5月31日上证指数是涨还是跌？
A. 涨 B. 跌 C. 平

注意： 请在本文文章下面的评论中留下答案（只认文章评论哦），同时写下自己的 微博昵称或者账号 名称（便于后续私信联系），5月30日凌晨12点之前回复有效！同一个人以第一次回复为准。