컴퓨토피아

참고 : http://highcharts.uservoice.com/forums/55896-general/suggestions/2554384-multiple-axis-alignment-control

         http://jsfiddle.net/highcharts/jrXQe/

$(function () {
   
    /**
     * Experimental Highcharts plugin to implement chart.alignThreshold option.
     * Author: Torstein Hønsi
     * Last revision: 2013-12-02
     */
    (function (H) {
        var each = H.each;
        H.wrap(H.Chart.prototype, 'adjustTickAmounts', function (proceed) {
            var ticksBelowThreshold = 0,
                ticksAboveThreshold = 0;
            if (this.options.chart.alignThresholds) {
                each(this.yAxis, function (axis) {
                    var threshold = axis.series[0] && axis.series[0].options.threshold || 0,
                        index = axis.tickPositions && axis.tickPositions.indexOf(threshold);

                    if (index !== undefined && index !== -1) {
                        axis.ticksBelowThreshold = index;
                        axis.ticksAboveThreshold = axis.tickPositions.length - index;
                        ticksBelowThreshold = Math.max(ticksBelowThreshold, index);
                        ticksAboveThreshold = Math.max(ticksAboveThreshold, axis.ticksAboveThreshold);
                    }
                });
   
                each(this.yAxis, function (axis) {
                   
                    var tickPositions = axis.tickPositions;
   
                    if (tickPositions) {
   
                        if (axis.ticksAboveThreshold < ticksAboveThreshold) {
                            while (axis.ticksAboveThreshold < ticksAboveThreshold) {
                                tickPositions.push(
                                    tickPositions[tickPositions.length - 1] + axis.tickInterval
                                );
                                axis.ticksAboveThreshold++;
                            }
                        }
   
                        if (axis.ticksBelowThreshold < ticksBelowThreshold) {
                            while (axis.ticksBelowThreshold < ticksBelowThreshold) {
                                tickPositions.unshift(
                                    tickPositions[0] - axis.tickInterval
                                );
                                axis.ticksBelowThreshold++;
                            }
   
                        }
                        //axis.transA *= (calculatedTickAmount - 1) / (tickAmount - 1);
                        axis.min = tickPositions[0];
                        axis.max = tickPositions[tickPositions.length - 1];
                    }
                });
            } else {
                proceed.call(this);
            }
   
        })
    }(Highcharts));
    
    $('#container').highcharts({
        chart: {
            alignThresholds: true,
            type: 'area'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: [{
            title: {
                text: 'Primary Axis'
            },
            gridLineWidth: 0
        }, {
            title: {
                text: 'Secondary Axis'
            },
            opposite: true
        }],
        legend: {
            layout: 'vertical',
            backgroundColor: '#FFFFFF',
            floating: true,
            align: 'left',
            x: 100,
            verticalAlign: 'top',
            y: 70
        },
        tooltip: {
            formatter: function() {
                return '<b>'+ this.series.name +'</b><br/>'+
                    this.x +': '+ this.y;
            }
        },
        series: [{
            data: [29.9, -71.5, -106.4, -129.2, -144.0, -176.0, -135.6, -148.5, -216.4, -194.1, -95.6, -54.4]
           
        }, {
            data: [129.9, 271.5, 306.4, -29.2, 544.0, 376.0, 435.6, 348.5, 216.4, 294.1, 35.6, 354.4],
            yAxis: 1
           
        }]
    });
});

$(document).ready(function(){

  // code
});

브라우저에서 DOM 트리를 생성하고난 후에 실행되게 되는 코드입니다.(DOM is ready)

$(window).load(function(){
  // code
});

모든 include 되는 프레임들과 object들, 이미지까지 로드된 이후에 실행됩니다.

document가 ready된 시점에는 DOM에 대한 접근만이 자유롭겠지만
아직 브라우저에서 다른 객체들이나 이미지들을 로드하지 않은 상황이므로
어떤 페이지를 사용자가 접근할 때 이미지에 대한 가공을 하려한다면 실패하게 되겠죠.
    하지만, window를 로드하고난 이후에 실행되는 코드들은
모든 객체나 프레임들(외부 contents를 담는 프레임까지),
이미지까지 모두 로드한 이후에 실행되므로
document에서 제한된 작업을 진행할 수 있겠습니다.
다만, 그렇게된다면 페이지의 로드타임만큼 사용자는
오랜 시간을 모니터앞에서 답답하게 기다려야하겠죠.

우선 jquery의 load, ready 메소드간의 차이점을 꼽자면
jquery 에서 load는 외부자원 접근(images, scripts, frames, iframes 등)과 window 객체에 대해 적용되는 메소드이며
ready는 document 객체에 한해서만 적용되는 메소드입니다.

window와 document 객체의 차이점에 대해서 안내해드리자면
window는 document의 부모객체로서 브라우저 자체를 의미할 수 있으며
접근할 수 있는 자식객체로는 document, self, navigator, screen, forms, history, location 등이 있으며
 HTML5에 대해서는 관련 서적을 살펴봐야겠네요^^;;
(이는 HTML4.0 기준으로 집필된 서적에서 서술된 내용이거든요;;)
 document 객체는 트리형태의 HTML 을 접근할 수 있는 객체입니다.
따라서 document는 html의 요소들이나 속성들을 접근할 때 사용하는 객체입니다.

종합하자면, 외부자원(src= <- 이건 웹서버에 요청(http request)을 날리겟다는 것으로 외부자원입니다) 이나
window 객체가 모두 로드되었을 때에 그 자원들을 가공할 필요가 있다면 $(window).load() 를 쓰시고,

그것이 아닌 브라우저에서 보이게 될 html 코드들에 대해서만 가공할 필요가 있다면
$(document).ready()를 사용하셔야 할 것입니다. :)

출처 : http://creator1022.tistory.com/156