Skip to content

highcharts.src.js源码解读

Jump to bottom
jiang2016tao edited this page Feb 26, 2019 · 10 revisions 
'use strict';
(function(root,factory){})(typeof window !='undefined' ? window:this,function(win){
    /**
     * 省去实现代码
     */
    return Highcharts;
});

声明静态模式，及时执行函数体。
发现源码并不是上面的格式，而是：

(function(root,factory){}(typeof window !='undefined' ? window:this,function(win){
    /**
     * 省去实现代码
     */
    return Highcharts;
}));

但是这两种的写法，我认为是一样的。实验证明都是即时执行的。
发现很多插件的源码里都喜欢这样：

var glob = typeof win === 'undefined' ? window : win

而在平时的代码里，我更倾向于这样写：

var glob = win?win:window

注意上面两种方法的区别 js中typeof用法详细介绍

userAgent = glob.navigator && glob.navigator.userAgent

记住上面的这种写法，之前一直以为不可以这样写。在实际代码里有很多地方可以这样写的，方便、节省空间。
先定义Highcharts的大致内容，包含浏览器和创建svg等。

return (H.keysPolyfill || Object.keys).call(undefined, obj);

上面的代码可以获取obj对象里的所有属性，这个很有用。在项目中，有可能需要获取对象里的属性的集合数组。
里面的一些公用方法，对我们以后项目的编写也是很有帮助的。
判断变量是否是字符串：

H.isString = function (s) {
		    return typeof s === 'string';
		};

判断变量是否是数组：

H.isArray = function (obj) {
		    var str = Object.prototype.toString.call(obj);
		    return str === '[object Array]' || str === '[object Array Iterator]';
		};

判断变量是否是对象：

H.isObject = function (obj, strict) {
		    return !!obj && typeof obj === 'object' && (!strict || !H.isArray(obj));
		};

判断变量是否是html 的dom节点标签：

H.isDOMElement = function (obj) {
		    return H.isObject(obj) && typeof obj.nodeType === 'number';
		};

JavaScript Infinity 属性判断变量是否是数字：

H.isNumber = function (n) {
		    return typeof n === 'number' && !isNaN(n) && n < Infinity && n > -Infinity;
		};

移除数组中的某项元素：

H.erase = function (arr, item) {
		    var i = arr.length;
		    while (i--) {
		        if (arr[i] === item) {
		            arr.splice(i, 1);
		            break;
		        }
		    }
		};

变量是否定义：

H.defined = function (obj) {
		    return obj !== undefined && obj !== null;
		};

highchart问题

报错Highcharts error #12: www.highcharts.com/errors/12

之前使用highchart是没什么问题的。最近优化需求，需要根据业务逻辑在图上部分线段的颜色不同来展示。使用了如下的代码格式：

"zones": [
                {
                    "value": 1534324879000,
                    "color": "#3598DB"
                },
                {
                    "value": 1534328479000,
                    "color": "red"
                },
                {
                    "color": "#3598DB"
                }
            ],
            "zoneAxis": "x"

这样在series里设置就可以了，但是发现图表上点的数量太多了，图表就不会显示。并报错Highcharts error #12: www.highcharts.com/errors/12。
plotOptions.series.turboThreshold
plotOptions.series.turboThreshold默认是1000，当数据列包含的数据超过这个值时，Highcharts 只接受一维数组（包含 y 值）或二维数组（包含 [x,y] 数据的数组）形式的数据，这样做是为了保证最好的性能。当数据量超过这个值并且是对象的形式配置数据，那么 Highcharts 会报 12 号 错误。
刚好在这里为了后面的业务，我将[x,y]型的数据数组改为了对象数据数组，对于我的问题，我直接设置这个值，问题解决。

饼图放大方法

（1）如果不需要特别强调数值大小，可以取消数据标签的显示。
（2）使用配置项distance为数据标签和切片的距离指定一个较小的值。甚至可以指定一个负值，让数据标签显示在切片的内部。
（3）使用饼图的配置项size强制设置饼图的大小。
饼图大小控制

Clone this wiki locally