flexible.js数据可视化

Posted 龖龖龖

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了flexible.js数据可视化相关的知识,希望对你有一定的参考价值。

数据可视化

数据可视化目的:借助于图形化手段,清晰有效地传达与沟通信息。
数据可视化可以把数据从冰冷的数据转换成图形,揭示蕴含在数据中的规律和道理。

flexible.js源码

(function flexible(window, document) {
    var docEl = document.documentElement;
    var dpr = window.devicePixelRatio || 1;


    // adjust body font size
    function setBodyFontSize() {
        if (document.body) {
            document.body.style.fontSize = 12 * dpr + "px";
        } else {
            document.addEventListener("DOMContentLoaded", setBodyFontSize);
        }
    }
    setBodyFontSize();


    // set 1rem = viewWidth / 10
    function setRemUnit() {
        // 这里默认是10等份,手动改为24,此时1rem=1920/24px即80px。(设计稿是1920px的)
        var rem = docEl.clientWidth / 24;
        docEl.style.fontSize = rem + "px";
    }


    setRemUnit();


    // reset rem unit on page resize
    window.addEventListener("resize", setRemUnit);
    window.addEventListener("pageshow", function (e) {
        if (e.persisted) {
            setRemUnit();
        }
    });


    // detect 0.5px supports
    if (dpr >= 2) {
        var fakeBody = document.createElement("body");
        var testElement = document.createElement("div");
        testElement.style.border = ".5px solid transparent";
        fakeBody.appendChild(testElement);
        docEl.appendChild(fakeBody);
        if (testElement.offsetHeight === 1) {
            docEl.classList.add("hairlines");
        }
        docEl.removeChild(fakeBody);
    }
})(window, document);

以上是关于flexible.js数据可视化的主要内容,如果未能解决你的问题,请参考以下文章

前端小工具:flexible.js实现rem自适应

原生js选项卡(代码临时存储)

移动端网页使用flexible.js加入百度联盟广告样式不一致问题解决

flexible.js字体大小诡异现象解析及解决方案

flexible.js + makegrid.js 自适应布局

原生js仿梦幻时间查看活动(代码临时存储)