如何使用 HighStock 的 tickPositioner 设置月底的刻度？答案

【问题标题】：How to use HighStock's tickPositioner to set tick at end of month?如何使用 HighStock 的 tickPositioner 设置月底的刻度？
【发布时间】：2015-05-18 20:40:11
【问题描述】：

This highcharts admin response 解释说这是不可能的：

没有使用当月最后一天的选项，但您可以创建自己的 tickPositioner 回调

我已经听从了建议，但是无论 tickPositioner 函数如何，似乎都没有任何改变！ I've created an isolated demo of the issue here. [只是添加了刻度定位器的this example。]

在 jsFiddle 示例中，您可以在下面看到我的 tickPositioner。我减去一天 (60*60*24*1000) 15 次 (*15)。十五是随机的，只是为了表明没有影响。

        xAxis:{
            //LOOK HERE!
            tickPositioner:function(){
                return _.forEach(this.tickPositions, function(date){                         
                    console.log('date',date, new Date(date), new Date(date - 60*60*24*1000*15));
                    //return date;   //uncomment to show orginal dates                     
                    return (date - 60*60*24*1000*15);
                });
            //LOOK HERE!
            }
        },

补充说明：

我可以告诉刻度定位器正在做某事，因为我可以：

如果功能设置不正确，请完全删除标记li>
如果日期不正确，请奇怪地格式化日期
如果一切设置正确，则根本不更改日期刻度。

我怀疑日期格式和最小刻度间隔有问题。在官方 highcharts example for tickpositioner 中，我可以看到它在工作，但是如果您减少他们设置的自定义增量，您会看到类似的问题，即对刻度位置没有影响。

【问题讨论】：

标签： javascript date highcharts stocks

【解决方案1】：

首先，我相信您的问题在于使用 lodash 的 forEach。它不会返回您认为它返回的内容。来自the documentation：

_.forEach(collection, [iteratee=_.identity], [thisArg])
...

退货

(Array|Object|string)：返回collection。

话虽如此，这里尝试解决您在每个月底的蜱虫的整体问题：

$('#container').highcharts('StockChart', {
    xAxis:{
        tickPositioner:function(min, max){
            var result = [];
            var current = min;
            
            while(current < max) {
                var date = new Date(current);
                var lastDate = new Date(date.getFullYear(), 
                                        date.getMonth() + 1, 
                                        0, 
                                        0, 
                                        -date.getTimezoneOffset());
                var nextDate = new Date(date.getFullYear(), 
                                        date.getMonth() + 1, 
                                        1, 
                                        0, 
                                        -date.getTimezoneOffset());
                
                result.push(lastDate.getTime());
                current = nextDate.getTime();
            }
            
            result.info = this.tickPositions.info;
            return result;
        }
    },
    // ...
});

查看this JSFiddle demonstration 的外观。代码可能还有改进的余地。

【讨论】：