Highstock中双X轴上的刻度线未对齐

时间:2018-11-08 11:48:45

标签: javascript highcharts

我有问题。

我有2个DateTime X轴。 与两个轴对应的级数具有相同的点数,并且间隔也相同。问题是绘制它们时,这些点未对齐。让我们来看一个例子: http://jsfiddle.net/6gqbj8sk/22/

    chart = new Highcharts.StockChart({

        chart: {
            renderTo: 'container',
            zoomType: 'x'
        },

        xAxis: [{
            type: 'datetime',
            events: {
                afterSetExtremes() {
                    let bottomAxis = this,
                        topAxis = this.chart.xAxis[1],
                        diferenciaMin = Math.abs(bottomAxis.dataMin - bottomAxis.min),
                        diferenciaMax = Math.abs(bottomAxis.dataMax - bottomAxis.max);
                    topAxis.setExtremes(topAxis.dataMin + diferenciaMin, topAxis.dataMax - diferenciaMax, true)
                }
            }
        }, {
            type: 'datetime',
            opposite: true,
        }],

        yAxis: {
            visible: true,
            opposite: false,
            showLastLabel: true,
            labels: {
                enabled: true,
                format: "{value}",
                align: "right"
            },
        },

        tooltip: {
            pointFormatter: function () {
                return '<span style="color:' + this.series.color + '">' + this.series.name + '</span>: <b>' + Highcharts.numberFormat(this.y, 2);
            }
        },

        legend: {
            enabled: true
        },

        navigator: {
            enabled: true
        },

        rangeSelector: {
            enabled: true
        },

        scrollbar: {
            enabled: true
        },

        navigation: {
            buttonOptions: {
                enabled: true
            }
        },

        series: [{"name":"Activa","type":"spline","xAxis":0,"pointStart":"1540339200000","data":[[1540339200000,0.352],[1540340100000,0.288],[1540341000000,0.464],[1540341900000,0.576],[1540342800000,0.304],[1540343700000,0.288],[1540344600000,0.464],[1540345500000,0.512],[1540346400000,0.368],[1540347300000,0.336],[1540348200000,0.384],[1540349100000,0.496],[1540350000000,0.432],[1540350900000,0.368],[1540351800000,0.304],[1540352700000,0.432],[1540353600000,0.544],[1540354500000,0.368],[1540355400000,0.288],[1540356300000,0.352],[1540357200000,0.544],[1540358100000,0.416],[1540359000000,0.272],[1540359900000,0.288],[1540360800000,0.56],[1540361700000,0.48],[1540362600000,0.256],[1540363500000,0],[1540364400000,0.272],[1540365300000,0.256],[1540366200000,0.224],[1540367100000,0.72],[1540368000000,0.304],[1540368900000,0.304],[1540369800000,0.064],[1540370700000,0.928],[1540371600000,0.4],[1540372500000,0.848],[1540373400000,0.24],[1540374300000,0.16],[1540375200000,0],[1540376100000,0.192],[1540377000000,0.864],[1540377900000,0.096],[1540378800000,0.432],[1540379700000,0.48],[1540380600000,0.336],[1540381500000,0.032],[1540382400000,0],[1540383300000,0.128],[1540384200000,0.32],[1540385100000,0.048],[1540386000000,0],[1540386900000,0.112],[1540387800000,0.32],[1540388700000,0.224],[1540389600000,0],[1540390500000,0.128],[1540391400000,0.208],[1540392300000,0.192],[1540393200000,0.08],[1540394100000,1.28],[1540395000000,1.808],[1540395900000,1.984],[1540396800000,1.84],[1540397700000,1.296],[1540398600000,0.128],[1540399500000,0.368],[1540400400000,1.248],[1540401300000,0],[1540402200000,0.08],[1540403100000,0.336],[1540404000000,0.256],[1540404900000,0.672],[1540405800000,0.144],[1540406700000,0.4],[1540407600000,0.816],[1540408500000,0.736],[1540409400000,0.912],[1540410300000,0.656],[1540411200000,0.544],[1540412100000,0.48],[1540413000000,0.384],[1540413900000,0.304],[1540414800000,0.448],[1540415700000,0.592],[1540416600000,0.368],[1540417500000,0.304],[1540418400000,0.4],[1540419300000,0.592],[1540420200000,0.4],[1540421100000,0.304],[1540422000000,0.384],[1540422900000,0.496],[1540423800000,0.464],[1540424700000,0.368]]},{"name":"Reactiva","type":"spline","xAxis":0,"pointStart":"1540339200000","data":[[1540339200000,0.352],[1540340100000,0.416],[1540341000000,0.096],[1540341900000,0],[1540342800000,0.4],[1540343700000,0.416],[1540344600000,0.176],[1540345500000,0],[1540346400000,0.256],[1540347300000,0.352],[1540348200000,0.272],[1540349100000,0],[1540350000000,0.096],[1540350900000,0.288],[1540351800000,0.384],[1540352700000,0.128],[1540353600000,0],[1540354500000,0.272],[1540355400000,0.416],[1540356300000,0.272],[1540357200000,0],[1540358100000,0.208],[1540359000000,0.416],[1540359900000,0.416],[1540360800000,0],[1540361700000,0.112],[1540362600000,0.432],[1540363500000,0.544],[1540364400000,0.144],[1540365300000,0.176],[1540366200000,0.512],[1540367100000,0.272],[1540368000000,0.112],[1540368900000,0.128],[1540369800000,0.448],[1540370700000,0.288],[1540371600000,0.384],[1540372500000,0.208],[1540373400000,0.336],[1540374300000,0.416],[1540375200000,0.528],[1540376100000,0.24],[1540377000000,0.56],[1540377900000,0.416],[1540378800000,0.432],[1540379700000,0.208],[1540380600000,0.032],[1540381500000,0.512],[1540382400000,0.528],[1540383300000,0.336],[1540384200000,0.016],[1540385100000,0.464],[1540386000000,0.528],[1540386900000,0.4],[1540387800000,0.064],[1540388700000,0.368],[1540389600000,0.544],[1540390500000,0.384],[1540391400000,0.24],[1540392300000,0.24],[1540393200000,0.432],[1540394100000,0.24],[1540395000000,0.064],[1540395900000,0],[1540396800000,0.048],[1540397700000,0.256],[1540398600000,0.448],[1540399500000,0],[1540400400000,1.184],[1540401300000,0.576],[1540402200000,0.528],[1540403100000,0.048],[1540404000000,0.176],[1540404900000,0.736],[1540405800000,0.432],[1540406700000,0.24],[1540407600000,0.144],[1540408500000,0.256],[1540409400000,0.112],[1540410300000,0.16],[1540411200000,0],[1540412100000,0.064],[1540413000000,0.288],[1540413900000,0.416],[1540414800000,0.112],[1540415700000,0],[1540416600000,0.32],[1540417500000,0.416],[1540418400000,0.288],[1540419300000,0],[1540420200000,0.192],[1540421100000,0.416],[1540422000000,0.288],[1540422900000,0.016],[1540423800000,0.032],[1540424700000,0.304]]},{"name":"Aparente","type":"spline","xAxis":0,"pointStart":"1540339200000","data":[[1540339200000,0.496],[1540340100000,0.504],[1540341000000,0.472],[1540341900000,0.576],[1540342800000,0.504],[1540343700000,0.504],[1540344600000,0.496],[1540345500000,0.512],[1540346400000,0.448],[1540347300000,0.488],[1540348200000,0.472],[1540349100000,0.496],[1540350000000,0.444],[1540350900000,0.468],[1540351800000,0.488],[1540352700000,0.452],[1540353600000,0.544],[1540354500000,0.456],[1540355400000,0.504],[1540356300000,0.444],[1540357200000,0.544],[1540358100000,0.464],[1540359000000,0.496],[1540359900000,0.504],[1540360800000,0.56],[1540361700000,0.492],[1540362600000,0.504],[1540363500000,0.544],[1540364400000,0.308],[1540365300000,0.312],[1540366200000,0.56],[1540367100000,0.768],[1540368000000,0.324],[1540368900000,0.328],[1540369800000,0.452],[1540370700000,0.972],[1540371600000,0.556],[1540372500000,0.872],[1540373400000,0.412],[1540374300000,0.444],[1540375200000,0.528],[1540376100000,0.308],[1540377000000,1.028],[1540377900000,0.428],[1540378800000,0.612],[1540379700000,0.524],[1540380600000,0.336],[1540381500000,0.512],[1540382400000,0.528],[1540383300000,0.36],[1540384200000,0.32],[1540385100000,0.468],[1540386000000,0.528],[1540386900000,0.416],[1540387800000,0.328],[1540388700000,0.432],[1540389600000,0.544],[1540390500000,0.404],[1540391400000,0.316],[1540392300000,0.308],[1540393200000,0.44],[1540394100000,1.304],[1540395000000,1.808],[1540395900000,1.984],[1540396800000,1.84],[1540397700000,1.32],[1540398600000,0.464],[1540399500000,0.368],[1540400400000,1.72],[1540401300000,0.576],[1540402200000,0.536],[1540403100000,0.34],[1540404000000,0.312],[1540404900000,0.996],[1540405800000,0.456],[1540406700000,0.468],[1540407600000,0.828],[1540408500000,0.78],[1540409400000,0.92],[1540410300000,0.676],[1540411200000,0.544],[1540412100000,0.484],[1540413000000,0.48],[1540413900000,0.516],[1540414800000,0.46],[1540415700000,0.592],[1540416600000,0.488],[1540417500000,0.516],[1540418400000,0.492],[1540419300000,0.592],[1540420200000,0.444],[1540421100000,0.516],[1540422000000,0.48],[1540422900000,0.496],[1540423800000,0.464],[1540424700000,0.476]]},{"name":"Activa","type":"column","xAxis":1,"pointStart":"1540252800000","data":[[1540252800000,0.288],[1540253700000,0.608],[1540254600000,0.48],[1540255500000,0.288],[1540256400000,0.384],[1540257300000,0.384],[1540258200000,0.496],[1540259100000,0.512],[1540260000000,0.304],[1540260900000,0.288],[1540261800000,0.528],[1540262700000,0.56],[1540263600000,0.32],[1540264500000,0.288],[1540265400000,0.432],[1540266300000,0.528],[1540267200000,0.416],[1540268100000,0.288],[1540269000000,0.384],[1540269900000,0.448],[1540270800000,0.48],[1540271700000,0.352],[1540272600000,0.352],[1540273500000,0.32],[1540274400000,0.48],[1540275300000,0.528],[1540276200000,0.304],[1540277100000,0.128],[1540278000000,0.24],[1540278900000,0.32],[1540279800000,0.016],[1540280700000,0.432],[1540281600000,0.4],[1540282500000,0.384],[1540283400000,0.608],[1540284300000,0.64],[1540285200000,0.16],[1540286100000,0.304],[1540287000000,0.224],[1540287900000,0.112],[1540288800000,0],[1540289700000,0.192],[1540290600000,0.784],[1540291500000,0.736],[1540292400000,0.128],[1540293300000,0.16],[1540294200000,0.256],[1540295100000,0.912],[1540296000000,0.224],[1540296900000,0.032],[1540297800000,0.256],[1540298700000,0.32],[1540299600000,0],[1540300500000,0],[1540301400000,0.336],[1540302300000,0.256],[1540303200000,0.048],[1540304100000,0.096],[1540305000000,0.176],[1540305900000,0.256],[1540306800000,0.416],[1540307700000,1.856],[1540308600000,1.792],[1540309500000,2.16],[1540310400000,3.152],[1540311300000,1.968],[1540312200000,1.888],[1540313100000,1.984],[1540314000000,2.256],[1540314900000,1.36],[1540315800000,0],[1540316700000,0.528],[1540317600000,0.352],[1540318500000,1.344],[1540319400000,0.048],[1540320300000,0.304],[1540321200000,0.32],[1540322100000,0.368],[1540323000000,0.384],[1540323900000,0.352],[1540324800000,0.368],[1540325700000,0.496],[1540326600000,0.48],[1540327500000,0.32],[1540328400000,0.304],[1540329300000,0.544],[1540330200000,0.544],[1540331100000,0.304],[1540332000000,0.304],[1540332900000,0.496],[1540333800000,0.512],[1540334700000,0.368],[1540335600000,0.384],[1540336500000,0.32],[1540337400000,0.496],[1540338300000,0.528]]},{"name":"Reactiva","type":"column","xAxis":1,"pointStart":"1540252800000","data":[[1540252800000,0.416],[1540253700000,0],[1540254600000,0],[1540255500000,0.416],[1540256400000,0.272],[1540257300000,0.24],[1540258200000,0],[1540259100000,0.096],[1540260000000,0.384],[1540260900000,0.416],[1540261800000,0.064],[1540262700000,0],[1540263600000,0.352],[1540264500000,0.416],[1540265400000,0.208],[1540266300000,0],[1540267200000,0.112],[1540268100000,0.4],[1540269000000,0.256],[1540269900000,0.096],[1540270800000,0],[1540271700000,0.272],[1540272600000,0.304],[1540273500000,0.352],[1540274400000,0],[1540275300000,0.08],[1540276200000,0.384],[1540277100000,0.48],[1540278000000,0.24],[1540278900000,0.048],[1540279800000,0.512],[1540280700000,0.496],[1540281600000,0.256],[1540282500000,0.192],[1540283400000,0.4],[1540284300000,0.432],[1540285200000,0.432],[1540286100000,0.224],[1540287000000,0.24],[1540287900000,0.448],[1540288800000,0.56],[1540289700000,0.288],[1540290600000,0.048],[1540291500000,0.448],[1540292400000,0.464],[1540293300000,0.384],[1540294200000,0.208],[1540295100000,0.528],[1540296000000,0.4],[1540296900000,0.56],[1540297800000,0.224],[1540298700000,0.064],[1540299600000,0.56],[1540300500000,0.56],[1540301400000,0.16],[1540302300000,0.176],[1540303200000,0.48],[1540304100000,0.464],[1540305000000,0.368],[1540305900000,0.208],[1540306800000,0.256],[1540307700000,0.016],[1540308600000,0.08],[1540309500000,0.016],[1540310400000,0],[1540311300000,0],[1540312200000,0.064],[1540313100000,0.096],[1540314000000,0],[1540314900000,0.176],[1540315800000,0.56],[1540316700000,0.736],[1540317600000,0.032],[1540318500000,1.136],[1540319400000,0.592],[1540320300000,0.48],[1540321200000,0.256],[1540322100000,0.08],[1540323000000,0.256],[1540323900000,0.32],[1540324800000,0.272],[1540325700000,0],[1540326600000,0.128],[1540327500000,0.384],[1540328400000,0.416],[1540329300000,0.032],[1540330200000,0.032],[1540331100000,0.416],[1540332000000,0.416],[1540332900000,0.128],[1540333800000,0],[1540334700000,0.288],[1540335600000,0.288],[1540336500000,0.368],[1540337400000,0],[1540338300000,0.08]]},{"name":"Aparente","type":"column","xAxis":1,"pointStart":"1540252800000","data":[[1540252800000,0.504],[1540253700000,0.608],[1540254600000,0.48],[1540255500000,0.504],[1540256400000,0.472],[1540257300000,0.452],[1540258200000,0.496],[1540259100000,0.52],[1540260000000,0.488],[1540260900000,0.504],[1540261800000,0.532],[1540262700000,0.56],[1540263600000,0.476],[1540264500000,0.504],[1540265400000,0.48],[1540266300000,0.528],[1540267200000,0.432],[1540268100000,0.492],[1540269000000,0.46],[1540269900000,0.46],[1540270800000,0.48],[1540271700000,0.444],[1540272600000,0.464],[1540273500000,0.476],[1540274400000,0.48],[1540275300000,0.536],[1540276200000,0.488],[1540277100000,0.496],[1540278000000,0.34],[1540278900000,0.324],[1540279800000,0.512],[1540280700000,0.656],[1540281600000,0.476],[1540282500000,0.428],[1540283400000,0.728],[1540284300000,0.772],[1540285200000,0.46],[1540286100000,0.376],[1540287000000,0.328],[1540287900000,0.46],[1540288800000,0.56],[1540289700000,0.348],[1540290600000,0.784],[1540291500000,0.86],[1540292400000,0.48],[1540293300000,0.416],[1540294200000,0.328],[1540295100000,1.052],[1540296000000,0.46],[1540296900000,0.56],[1540297800000,0.34],[1540298700000,0.328],[1540299600000,0.56],[1540300500000,0.56],[1540301400000,0.372],[1540302300000,0.312],[1540303200000,0.484],[1540304100000,0.472],[1540305000000,0.408],[1540305900000,0.328],[1540306800000,0.488],[1540307700000,1.856],[1540308600000,1.792],[1540309500000,2.16],[1540310400000,3.152],[1540311300000,1.968],[1540312200000,1.888],[1540313100000,1.988],[1540314000000,2.256],[1540314900000,1.372],[1540315800000,0.56],[1540316700000,0.904],[1540317600000,0.352],[1540318500000,1.76],[1540319400000,0.592],[1540320300000,0.568],[1540321200000,0.408],[1540322100000,0.376],[1540323000000,0.46],[1540323900000,0.476],[1540324800000,0.456],[1540325700000,0.496],[1540326600000,0.496],[1540327500000,0.5],[1540328400000,0.516],[1540329300000,0.544],[1540330200000,0.544],[1540331100000,0.516],[1540332000000,0.516],[1540332900000,0.512],[1540333800000,0.512],[1540334700000,0.468],[1540335600000,0.48],[1540336500000,0.488],[1540337400000,0.496],[1540338300000,0.536]]}]
    });

See image

如图所示,对应于同一时间的点不在一条直线上。在这两种情况下,时间范围和两个轴上的点数都完全相同。

感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

使用linkedTo属性:

        xAxis: [{
            type: 'datetime'
        }, {
            type: 'datetime',
            opposite: true,
            linkedTo: 0
        }]

实时演示:http://jsfiddle.net/BlackLabel/umqLx640/

API:https://api.highcharts.com/highstock/xAxis.linkedTo