來自Chart.js的幾個JS helper function

Kross 發布于2019-08-20 16:15 / 2225人閱讀

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

最近兼職的項目里面因為要用charts進行數據的交互式可視化，用Chart.js比較多，也踩了不少坑。
為了改bug提pr外加學習一下提高姿勢水平花了一點時間看了下源碼，發現一些比較有用簡介的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

提供了數組和Object統一的遍歷函數，實際使用舉例：

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

helpers.clone

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

Chart.js內部用這個進行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 刷新數據 chart.js 大量數據

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

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

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

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

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

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

xuhong 2019-08-20 12:34 評論0 收藏0
js函數調用模式和常用的幾個方法

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

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

摘要：使用來呈現圖表。允許用戶在應用程序中創建美觀的可復用的圖表。它是基于創建的，是一個以數據為中心的圖表庫，可以改進數據可視化的效果。非常輕巧，并使用元素來創建很奇特的圖表。是庫中較為古老的圖表庫之一。總結以上介紹的庫都是高質量的圖表庫。當前，數據可視化已經成為數據科學領域非常重要的一部分。不同網絡系統中產生的數據，都需要經過適當的可視化處理，以便更好的呈現給用戶讀取和分析。對任何一個...

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

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

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