Highcharts 在新的图表里显示选中的曲线范围

发表于 更新于 分类于 阅读次数： 本文字数： 179 阅读时长 ≈ 1 分钟

总结一下实现方式，两张图表共用一个 chart 图表配置，在图表1中根据选中区域设置 X 轴最大、最小值，图表2同步更新。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
$(function () {
    var chart = null;
    // create the chart
    $('#container').highcharts({
        chart: {
            events: {
                selection: function (event) {
                    var min = event.xAxis[0].min;
                    var max = event.xAxis[0].max;
                    chart.xAxis[0].setExtremes(Math.ceil(min), Math.ceil(max));
                    return false;
                }
            },
            zoomType: 'x'
        },
        title: {
            text: 'Chart selection demo'
        },
        subtitle: {
            text: 'Click and drag the plot area to draw a selection'
        },
        series: [{
            type: 'column',
            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: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4].reverse()
        }]
    });
    $('#min-chart').highcharts({
        title: {
            text: ''
        },
        series: [{
            type: 'column',
            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: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4].reverse()
        }]
    }, function(c) {
        chart = c;
    });
});

参考文档：
图表缩放