Question

我无法让我的常见日期时间xAxis在线图和柱形图之间进行视觉对齐。我希望十字准线能够步调一致。

以下是带有同步十字准线的线图和柱形图，用于演示：

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

（注意：我实际上使用的是Highstock的当前版本，但是小提琴是一个极小的例子）

强制性代码（改为小提琴）：

$('<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＆＃39; minPadding，maxPadding属性：

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

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

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

在行/列图表中对齐xAxis

1 个答案: