來自Chart.js的幾個JS helper function

Kross 發(fā)布于2019-08-20 16:15 / 2232人閱讀

摘要：最近兼職的項目里面因為要用進行數(shù)據(jù)的交互式可視化，用比較多，也踩了不少坑。內(nèi)部用這個進行之類的時，先深拷貝然后再擴展，比較方便。可以看出直接給原型進行擴展，寫起來非常簡潔。

最近兼職的項目里面因為要用charts進行數(shù)據(jù)的交互式可視化，用Chart.js比較多，也踩了不少坑。
為了改bug提pr外加學習一下提高姿勢水平花了一點時間看了下源碼，發(fā)現(xiàn)一些比較有用簡介的helper function很值得學習及日常使用。

代碼

var helpers = {};

// -- Basic js utility methods
helpers.each = function(loopable, callback, self, reverse) {
    // Check to see if null or undefined firstly.
    var i, len;
    if (helpers.isArray(loopable)) {
        len = loopable.length;
        if (reverse) {
            for (i = len - 1; i >= 0; i--) {
                callback.call(self, loopable[i], i);
            }
        } else {
            for (i = 0; i < len; i++) {
                callback.call(self, loopable[i], i);
            }
        }
    } else if (typeof loopable === "object") {
        var keys = Object.keys(loopable);
        len = keys.length;
        for (i = 0; i < len; i++) {
            callback.call(self, loopable[keys[i]], keys[i]);
        }
    }
};
helpers.clone = function(obj) {
    var objClone = {};
    helpers.each(obj, function(value, key) {
        if (helpers.isArray(value)) {
            objClone[key] = value.slice(0);
        } else if (typeof value === "object" && value !== null) {
            objClone[key] = helpers.clone(value);
        } else {
            objClone[key] = value;
        }
    });
    return objClone;
};
helpers.extend = function(base) {
    var setFn = function(value, key) {
        base[key] = value;
    };
    for (var i = 1, ilen = arguments.length; i < ilen; i++) {
        helpers.each(arguments[i], setFn);
    }
    return base;
};

使用場景 helpers.each

提供了數(shù)組和Object統(tǒng)一的遍歷函數(shù)，實際使用舉例：

helpers.each(scalesOptions.xAxes, function(xAxisOptions, index) {
  xAxisOptions.id = xAxisOptions.id || ("x-axis-" + index);
});

helpers.clone

提供了完整的深拷貝函數(shù)，與常用的JSON.parse(JSON.stringify(obj))的區(qū)別在于這個函數(shù)可以深拷貝對象內(nèi)的函數(shù)。

Chart.js內(nèi)部用這個進行config之類的merge時，先深拷貝然后再擴展，比較方便。

var base = helpers.clone(_base);

helpers.extend

Chart.js的設計思想包含了很多plugin形式，本身的Chart的核心功能也都有擴展的方式定義的，關鍵就在extend。

helpers.extend(Chart.prototype, /** @lends Chart */ {
  /**
    * @private
    */
  construct: function(item, config) {
    // ...
  },

  /**
    * @private
    */
  initialize: function() {
    // ...
  },
  // ...
}

可以看出直接給原型進行擴展，寫起來非常簡潔。

閱讀原文

GPU云服務器云服務器 chart.js chart.js cdn chart.js 刷新數(shù)據(jù) chart.js 大量數(shù)據(jù)

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/82815.html

編寫javascript模板引擎的幾個步驟

摘要：先推薦一個我自己寫的模板引擎，項目地址。下面就是總結的編寫模板引擎的幾個步驟例如一個模板為最終會編譯成為一個函數(shù)可以觀察到模板中的所有的變量名都被指定成了參數(shù)對象的屬性，并且該函數(shù)自始至終只做了一件事，就是構建字符串，并將其返回。 showImg(https://segmentfault.com/img/remote/1460000007498588?w=300&h=113); 先推薦...

xiaoxiaozi 2019-08-20 12:20 評論0 收藏0
聲明式與響應式——前端新一代數(shù)據(jù)可視化方案

摘要：數(shù)據(jù)可視化圖表圖表作為數(shù)據(jù)可視化最常見的表現(xiàn)形式之一，往往被以偏概全的認為圖表就是數(shù)據(jù)可視化。嚴格來說，數(shù)據(jù)可視化應該是連接數(shù)據(jù)與視覺的一個映射關系，將數(shù)據(jù)映射成人更容易感知其規(guī)律的可視化結果。題目中的新一代是個相對的概念，事實上本文即將介紹的方法已經(jīng)有了生產(chǎn)環(huán)境可用的實現(xiàn)方案（這也側面佐證了其可行性），但考慮到此方法與現(xiàn)在大部分前端項目中所使用的數(shù)據(jù)可視化方案相比仍有一些優(yōu)勢，因此...

xuhong 2019-08-20 12:34 評論0 收藏0
js函數(shù)調(diào)用模式和常用的幾個方法

摘要：一函數(shù)調(diào)用的種模式方法調(diào)用模式當一個函數(shù)被保存為對象的一個屬性時，我們稱它為一個方法。二函數(shù)常用的三個方法在指定值和參數(shù)參數(shù)以數(shù)組或類數(shù)組對象的形式存在的情況下調(diào)用某個函數(shù)。當綁定函數(shù)被調(diào)用時，該參數(shù)會作為原函數(shù)運行時的指向。一、函數(shù)調(diào)用的4種模式 (1) 方法調(diào)用模式當一個函數(shù)被保存為對象的一個屬性時，我們稱它為一個方法。當一個方法被調(diào)用時，this 被綁定到該對象。如果調(diào)用表達...

zhigoo 2019-08-19 18:32 評論0 收藏0
前端開發(fā)者常用的9個JavaScript圖表庫

摘要：使用來呈現(xiàn)圖表。允許用戶在應用程序中創(chuàng)建美觀的可復用的圖表。它是基于創(chuàng)建的，是一個以數(shù)據(jù)為中心的圖表庫，可以改進數(shù)據(jù)可視化的效果。非常輕巧，并使用元素來創(chuàng)建很奇特的圖表。是庫中較為古老的圖表庫之一。總結以上介紹的庫都是高質(zhì)量的圖表庫。當前，數(shù)據(jù)可視化已經(jīng)成為數(shù)據(jù)科學領域非常重要的一部分。不同網(wǎng)絡系統(tǒng)中產(chǎn)生的數(shù)據(jù)，都需要經(jīng)過適當?shù)目梢暬幚恚员愀玫某尸F(xiàn)給用戶讀取和分析。對任何一個...

luck 2019-08-22 11:21 評論0 收藏0
利用h5,chart.js監(jiān)測手機三軸加速度，用以研究計步算法等

摘要：用來判斷手機瀏覽器是否支持訪問硬件資源，通過上一句代碼來對該事件進行監(jiān)聽，第一個參數(shù)是事件類型，第二個參數(shù)是一個對事件的處理，在總通過獲得加速器對象，分別獲取傳感器三個分量的參數(shù)，這樣就完成了參數(shù)的獲取。用window.DeviceMotionEvent來判斷手機瀏覽器是否支持訪問硬件資源，window.addEventListener(devicemotion,deviceMoti...

crossoverJie 2019-08-20 17:48 評論0 收藏0