HighStock如何实现多个图形共用一个滚动条和量程选择器

本文已参与「新人创作礼」活动，一起开启掘金创作之路。​

 先展示下最终效果：

​

基本思路：关闭图2的量程选择器（rangeSelector）和导航条（navigator）；通过监听图1导航条的量程变化，修改图2导航条的量程。

接下来开始放源码！

<div style="width:40%;height:100%;overflow:hidden;">
    <div id="chart1"></div>
</div>
<div style="width:60%;height:100%;overflow:hidden;">
    <div id="chart2"></div>
</div>

由于有图1和图2有很多重复部分，就事先把公共部分提取出来 

var commonChartOptions = {
    tooltip: {
        dateTimeLabelFormats: {//修改x轴时间tooltip显示
            millisecond: "%m-%d, %H:%M:%S.%L",
            second: "%m-%d, %H:%M",
            minute: "%m-%d, %H:%M",
            hour: "%m-%d, %H:%M",
            day: "%m-%d, %Y",
            week: "Week from %A, %m-%d, %Y",
            month: "%m %Y",
            year: "%Y"
        },
    },
    chart: {
        type: 'line',
        zoomType: 'x',
        height: document.body.clientHeight,
    },
    legend: {
        enabled: true,
    },
    credits: {
        enabled: false
    },
    scrollbar: {
        liveRedraw: false,
        enabled: false
    },
    rangeSelector: {
        buttons: [{
            type: 'hour',
            count: 3,
            text: '3h',
        }, {
            type: 'day',
            count: 3,
            text: '3d'
        }, {
            type: 'week',
            count: 1,
            text: '1w',
            dataGrouping: {
                forced: true,
                units: [['day', [1]]]
            }
        }, {
            type: 'month',
            count: 1,
            text: '1m',
        }, {
            type: 'year',
            count: 1,
            text: '1y',
        }, {
            type: 'all',
            text: 'All'
        }],
        selected: 0,
        inputEnabled: false,
    }
}

接下来就是重头戏啦！开始实例化图形！ 

chart1 = Highcharts.stockChart('chart1',  $.extend(commonChartOptions,{
    yAxis: [//将一张图分三个部分显示
    {//0
        opposite: false,//false标题显示在左边；true为右边（默认）
        labels: {
            align: 'left',
            x: 3
        },
        title: {
            text: '标题1'
        },
        height: '32%',
        lineWidth: 2,
        resize: {
            enabled: true
        }
    }, {//1
        opposite: false,
        labels: {
            align: 'left',
            x: 3
        },
        title: {
            text: '标题2'
        },
        min: -1,
        max: 1,
        top: '33%',
        height: '32%',
        offset: 0,
        lineWidth: 2,
    }, {//2
        opposite: false,
        labels: {
            align: 'left',
            x: 3
        },
        title: {
            text: '标题3'
        },
        top: '66%',
        height: '32%',
        offset: 0,
        lineWidth: 2,
    }],
    xAxis: {
        crosshair: true,
        events: {
            //监听图1滚动条变化，设置图2导航条量程
            setExtremes: function ({ trigger, min, max }) {
                if (typeof (trigger) !== 'undefined') {
                    chart2.xAxis[0].setExtremes(min, max);
                }
            }
        }
    },
    series: seriesData1
}));

图2和图1设置基本一致，最大不同的是需要把rangeSelector和navigator关闭

chart2= Highcharts.stockChart('chart2', $.extend(commonChartOptions, {
    chart: $.extend(commonChartOptions.chart, {
        events: {//初始化导航条
            load: function () {
                var { min, max } = chart2.xAxis[0].getExtremes();
                this.xAxis[0].setExtremes(min, max);
            }
        }
    }),
    yAxis: [{
        labels: {
            align: 'right',
            x: -3
        },
        title: {
            text: '标题4'
        },
        height: '32%',
        lineWidth: 2,
        resize: {
            enabled: true
        }
    }, {
        labels: {
            align: 'right',
            x: -3,
            formatter: function () {
                if (this.value > 1) return this.value + "k";
                else return this.value * 1000;
            }
        },
        title: {
            text: '标题5'
        },
        top: '33%',
        height: '32%',
        offset: 0,
        lineWidth: 2
    }, {
        labels: {
            align: 'right',
            x: -3,
            formatter: function () {
                return this.value;
            }
        },
        title: {
            text: '标题6'
        },
        top: '66%',
        height: '32%',
        offset: 0,
        lineWidth: 2
    }],
    rangeSelector: {
        enabled: false//关闭rangeSelector
    },
    navigator: {
        enabled: false//关闭导航条
    },
    series: seriesData2,
    xAxis: {
        crosshair: true,
        events: {
            //监听图2导航条变化，设置图1导航条量程
            setExtremes: function ({ trigger, min, max }) {
                if (typeof (trigger) !== 'undefined') {
                    chart1.xAxis[0].setExtremes(min, max);
                }
            }
        }
    },
}));

 最后注意一下，数据列的yAxis一定要填，yAxis指定了数据列的显示区间

seriesData = [{
    name: '标题1',
    yAxis: 0,//！！！！！！
    colorIndex: 0,//0-11
    data: data
},...]

​