阅读 886

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

原文链接: www.zhangxinxu.com

这篇文章发布于 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;
}复制代码

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

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

  1. 点元素在页面上写好;
  2. 设置线颜色、粗细和变换点位置;
  3. 套用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点之前回复有效!同一个人以第一次回复为准。

祝大家好运!

4个月出库2万册,《CSS世界》签名版独家发售,点击显示购买码

(本篇完)// 想要打赏?点击这里。有话要说?点击这里

相关文章
    标签: echarts, highcharts, line, Math, rad, transform, 图形生成, 图表
    文章分类
    前端