Question

我在这里有一个Highstock Stock图表： http://www.intesasanpaololife.ie/it/prodotti/prospettiva-20/fondi/profilo-base （它位于页面顶部）。如果我选择一个短期（使用日期选择器选择2015年4月1日作为开始日期），则x轴上的日期显示为三个点，而不是正确的日期。如果我使用底部的滚动条滚动，则会显示正确的日期。我们使用自定义函数来选择日期在轴上的位置。这三个点在我看来是一个函数的效果，如果没有足够的空间，将标签更改为点，但事实并非如此。启动图表的功能在此文件中： http://www.intesasanpaololife.ie/jscript/fund.js，从第27行开始：

$.getJSON($('#fund-trend').data('source'), function (data) {

    var tickerPositions = function(series){
        var positions = [];
        for(var i=0; i<series.length; i++){
            positions.push(series[i][0]);
        }
        return positions;
    }
    var tP = tickerPositions(data.series[0].data);
    // console.log(tP);
    $('#fund-trend').highcharts('StockChart',{
        chart: {
            backgroundColor:'#e1ebf5',
            plotBorderWidth: null,
            plotShadow: false,

            events: {
                load: function(chart) {
                    // apply the date pickers
                    setTimeout(function() {
                        $('input.highcharts-range-selector', $('#fund-trend')).datepicker(
                            // $.datepicker.regional[ "it" ]
                            {
                                beforeShowDay: function(date){
                                    if(date.getDay() == 3){
                                        return [true];
                                    } else {
                                        return [false];
                                    }
                                }
                            }
                        );
                    }, 0);
                }
            }
        },
        colors: [
            '#1c578f', '#99b3cc'
        ],

        title : {
            text : ''
        },
        credits: {
            enabled: false
        },

        tooltip: {
            valueSuffix: ' €',
            valueDecimals: 2,
            dateTimeLabelFormats:{
                millisecond:"%A, %b %e, %H:%M:%S.%L",
                second:"%A, %b %e, %H:%M:%S",
                minute:"%A, %b %e, %H:%M",
                hour:"%A, %b %e, %H:%M",
                day:"%d/%m/%Y",
                week:"Settimana del %d/%m/%Y",
                month:"%B %Y",
                year:"%Y"
            }
        },
        plotOptions: {
            series: {
                dataGrouping: {
                    dateTimeLabelFormats: {
                        millisecond: ['%A, %b %e, %H:%M:%S.%L', '%A, %b %e, %H:%M:%S.%L', '-%H:%M:%S.%L'],
                        second: ['%A, %b %e, %H:%M:%S', '%A, %b %e, %H:%M:%S', '-%H:%M:%S'],
                        minute: ['%A, %b %e, %H:%M', '%A, %b %e, %H:%M', '-%H:%M'],
                        hour: ['%A, %b %e, %H:%M', '%A, %b %e, %H:%M', '-%H:%M'],
                        day: ['%A, %b %e, %Y', '%A, %b %e', '-%A, %b %e, %Y'],
                        week: ['Settimana del %d/%m/%Y', 'dal %d/%m/%Y', 'al %d/%m/%Y'],
                        month: ['%B %Y', '%B', '-%B %Y'],
                        year: ['%Y', '%Y', '-%Y']
                    }
                }
            }
        },
        rangeSelector: {
            enabled: true,
            buttons: [],
            //inputDateFormat: "%d %b %Y",
            inputDateFormat: '%d/%m/%Y',
            inputEditDateFormat: "%d/%m/%Y",
            inputDateParser: function(value){
                value = value.split("/");
                var date = Date.UTC(
                    parseInt((value[2])),
                    parseInt((value[1]-1)),
                    parseInt(value[0])
                );

                return (date);
            }

        },
        xAxis: {
            tickInterval:  7 * 24 * 36e5,
            labels: {
                format: '{value:%d-%m-%Y}'
            },
            startOfWeek: 3,
            // tickPositions: tP,
            tickPositioner: function(min, max){
                // console.log("positioning" + min + " " + max + " " + (max-min));
                var selectCurrentPositions = function(min, max){
                    var positions = [];
                    var weeks = (max-min ) / (7 * 24 * 36e5);
                    var interval = Math.ceil(weeks/15);
                    //console.log ("weeks " + weeks + " interval " + interval);
                    var count = 0;
                    for(var i=tP.length-1; i>0; i--){
                        // console.log(tP[i]);
                        // console.log(count + " interval  " + interval + " tp[i] " + tP[i] );
                        if(tP[i]>= min || tP[i] <= max) {
                            if(count%interval == 0  ) {
                                //    console.log("pushing it i is "+ i);
                                positions.push(tP[i]);
                            }
                        }
                        count++;
                    }
                    // console.log(positions);
                    return positions;
                }

                return selectCurrentPositions(min,max);
            },
            endOnTick: false

        },
        navigator: {
            enabled: false
        },

        series : data.series
    });
});

有什么想法吗？有什么帮助吗？

Answer 1

问题出在tickPositioner上。在这一行：if(tP[i]>= min || tP[i] <= max)。

应该有：if(tP[i]>= min && tP[i] <= max)。我想你想要在范围内。

Highcharts / Highstock：x轴日期显示为三个点

1 个答案: