在行/列图表中对齐xAxis

时间:2016-08-14 20:36:24

标签: javascript highcharts highstock

我无法让我的常见日期时间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],
                ]
            }
        ]
    });

1 个答案:

答案 0 :(得分:1)

设置xAxis&#39; minPadding,maxPadding属性:

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

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

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