当日期不存在于系列中时,Highstock会比较之前的数据点

时间:2015-12-16 11:36:59

标签: javascript jquery datetime highcharts highstock

我使用highstock在线图中显示基金数据,我使用的数据系列是缺少日期(大多数是周末)。我无法控制数据系列的源代码,虽然我已经通过在JS中循环来格式化它,因此它可以与Highstock一起使用。当我在缺失日期使用rangeSelector时,当我在范围选择器中选择到周末日期(数据系列中缺少的日期)时,会出现问题,比较百分比从下一个开始计算可用数据点。

示例

  1. 转到此演示:http://www.highcharts.com/stock/demo/compare
  2. 选择2014年12月14日作为发件人日期。
  3. 计算从2014-12-15开始作为0值,即星期一。我希望它始终在前一个数据点开始比较百分比,而不是下一个数据点。我希望它从2014-12-12开始,这是星期五。

    我如何在JS中发起highstock:

    var opts = {
        chart : {
            backgroundColor: '#f9f9fa',
            borderWidth: 0,
            type: 'line'
        },
        rangeSelector : {
            buttons: [{
                type: 'month',
                count: 3,
                text: '3m'
            }, {
                type: 'month',
                count: 6,
                text: '6m'
            }, {
                type: 'ytd',
                text: 'YTD'
            }, {
                type: 'year',
                count: 1,
                text: '1y'
            }, {
                type: 'all',
                text: 'All'
            }],
            selected : 3,
            inputEnabled: false
        },
    
        plotOptions: {
            series: {
                compare: 'percent'
            }
        },
    
        title : {
            text : ''
        },
    
        navigator : {
            enabled : false
        },
    
        credits: {
            enabled: false
        },
    
        series : [{
            name : '',
            data : seriesData,
            lineColor : '#002855',
            tooltip: {
                valueDecimals: 4
            },
            turboThreshold : 0
        }],
    
        xAxis : {
            dateTimeLabelFormats: {
                millisecond: '%H:%M:%S.%L',
                second: '%H:%M:%S',
                minute: '%H:%M',
                hour: '%H:%M',
                day: '%e %b.',
                week: '%b %y',
                month: '%b %y',
                year: '%Y'
            },
            ordinal: false,
            minTickInterval : 4 * 7 * 24 * 3600 * 1000
        },
    
        yAxis : {
            labels: {
                format: '{value} %'
            }
        },
    
        tooltip : {
            valueSuffix : '',
            pointFormat : '<span style="color:{point.color}">\u25CF</span> {point.y} SEK ({point.change}%)<br/>'
        }
    };
    
    $(el).highcharts('StockChart', opts);
    

    我的 seriesData var在格式化后用于Highstock时看起来像这样:

    [ 
        { name="2005-01-03", x=1104710400000, y=100 },
        { name="2005-01-04", x=1104796800000, y=99.9983 },
        { name="2005-01-05", x=1104883200000, y=99.9175014 },
        { name="2005-01-07", x=1105056000000, y=100.0739722 },
        // This continues to the current date
    ]
    

    x 是时间戳 y 是股票价值 名称是表示 x

    中的时间戳的字符串 之前定义了

    el ,它是一个元素节点对象。

    当数据系列中的日期不存在时,是否可以在先前的可用数据点开始比较而不是下一个?

    对此问题的任何帮助将不胜感激!

    修改:添加我的解决方案作为下面的答案

1 个答案:

答案 0 :(得分:1)

我发现 afterSetExtremes 对修改min和max非常有用,我检查日期是星期六还是星期日。如果它是一个星期六我回到-1天的时间,如果它是一个星期天我回到-2天的时间。这应该涵盖我所有正常的周末,它的效果非常好。虽然它不会涵盖工作日发生的假期。我也没有修改最长时间,但我可能需要这样做。

我当前的 xAxis

xAxis : {
    events: {
        afterSetExtremes: function(e){

            var maxTimestamp = this.max,
                minTimestamp = this.min;

            var dateMin = new Date( minTimestamp ),
                dateMax = new Date( maxTimestamp ),
                minDayOfTheWeek = dateMin.getDay();

            // Test to see if its saturday or sunday
            if( minDayOfTheWeek === 6 || minDayOfTheWeek === 0 ){

                if( minDayOfTheWeek === 6 ){
                    dateMin.setDate( dateMin.getDate() - 1 );
                }else if( minDayOfTheWeek === 0 ){
                    dateMin.setDate( dateMin.getDate() - 2 );
                }

                this.setExtremes( dateMin.getTime(), dateMax.getTime() );
            }

        }
    },
    dateTimeLabelFormats: {
        millisecond: '%H:%M:%S.%L',
        second: '%H:%M:%S',
        minute: '%H:%M',
        hour: '%H:%M',
        day: '%e %b.',
        week: '%b %y',
        month: '%b %y',
        year: '%Y'
    },
    ordinal: false,
    minTickInterval : 4 * 7 * 24 * 3600 * 1000
}

并将此添加到图表,因为 afterSetExtremes 不为我加载时运行:

chart : {
    backgroundColor: '#f9f9fa',
    borderWidth: 0,
    events:{
        load: function(){
            var max = this.xAxis[0].max,
                min = this.xAxis[0].min;

            this.xAxis[0].setExtremes( min, max );
        }
    },
    type: 'line'
}