在 line/column 个图表中对齐 xAxis

Question

我无法让我的常用日期时间 xAxis 在折线图和柱形图中可视化排列。我希望十字准线同步移动。

以下是带有同步十字准线的折线图和柱形图以供演示：

https://jsfiddle.net/aadhoc331/9xodqw4u/

（注意：我实际上使用的是当前版本的 Highstock，但 fiddle 是一个最小的示例）

必填代码（转至 fiddle）：

$('<div class="chart">')
    .appendTo('#container')
    .highcharts({
        title: {
            text: 'Chart A',
        },
        chart: {
            type: 'line'
        },
        xAxis: {
            type: 'datetime',
            crosshair: true,
        },
        yAxis: {
            title: {
                text: undefined
            },
            labels: {
                enabled: false,
            },
        },
        series: [
            {
                name: 'Line',
                type: 'line',
                data: [
                    [1072915200000, 8000],
                    [1104537600000, 9000],
                    [1136073600000, 10000],
                    [1167609600000, 11000],
                    [1199145600000, 12000],
                    [1230768000000, 13000],
                    [1262304000000, 14000],
                    [1293840000000, 15000],
                ]
            }
        ]
    });

$('<div class="chart">')
    .appendTo('#container')
    .highcharts({
        title: {
            text: 'Chart B',
        },
        chart: {
            type: 'column'
        },
        xAxis: {
            type: 'datetime',
            crosshair: true,
        },
        yAxis: {
            title: {
                text: undefined
            },
            labels: {
                enabled: false,
            },
        },
        plotOptions: {
            column: {
                stacking: 'normal',
            }
        },
        series: [
            {
                type: 'line',
                name: 'The Line',
                data: [
                    [1072915200000, 800],
                    [1104537600000, 900],
                    [1136073600000, 1000],
                    [1167609600000, 1100],
                    [1199145600000, 1200],
                    [1230768000000, 1300],
                    [1262304000000, 1400],
                    [1293840000000, 1500],
                ]
            },
            {
                type: 'column',
                name: 'The Columns',
                data: [
                    [1072915200000, 800],
                    [1104537600000, 900],
                    [1136073600000, 1000],
                    [1167609600000, 1100],
                    [1199145600000, 1200],
                    [1230768000000, 1300],
                    [1262304000000, 1400],
                    [1293840000000, 1500],
                ]
            }
        ]
    });

Answer 1

设置 xAxis 的 minPadding、maxPadding 属性：

 xAxis: {
            type: 'datetime',
            crosshair: true,
            minPadding: 0.08,
            maxPadding: 0.08
        }

https://jsfiddle.net/9xodqw4u/1/

请注意，如果您使用导航器，则需要不同的方法 - 导航器设置极值并重置填充。

在 line/column 个图表中对齐 xAxis

Align xAxis across line/column charts

javascript

highcharts

highstock