javascript - 当系列中不存在日期时,Highstock 比较先前的数据点

标签 javascript jquery datetime highcharts

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

示例

  1. 转到此演示:http://www.highcharts.com/stock/demo/compare
  2. 选择 2014 年 12 月 14 日作为开始日期。

从 2014-12-15 开始计算,值为 0,即星期一。我希望它始终在前一个数据点而不是下一个数据点开始比较百分比。我希望它从 2014 年 12 月 12 日星期五开始。

如何在 JS 中启动 highstocks:

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 是股票值(value)
name是一个字符串,表示x

中的时间戳

el 是之前定义的,是一个元素节点对象。

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

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

编辑:添加我的解决方案作为下面的答案

最佳答案

我发现 afterSetExtremes 对于修改最小值和最大值非常有用,我检查日期是星期六还是星期日。如果是星期六,我会回溯 -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'
}

关于javascript - 当系列中不存在日期时,Highstock 比较先前的数据点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34311029/

相关文章:

javascript - 浏览器中的服务器响应时间

html - 在按钮背景上应用两种颜色

java - 如何将 Joda-Time DateTime 转换为 java.util.Date ,反之亦然?

Python 2.7 - 使用 +01 :00 转换日期时间

javascript - JQuery 命名空间/代码表现得很有趣

javascript - React 和 Redux 丢失状态

javascript - Buefy datepicker如何输出 'yyyy-MM-dd'字符串?

javascript - 来自 JavaScript Split 函数的意外行为 (Chrome/Firefox)

javascript - 如何在 javascript 中插入 css?

javascript - moment-timezone America/Sao_Paulo 错误的时区偏移量