Question

在HighCharts JS中，如何在每个条形下标记每月的日期（即标记蓝条），如下图所示（显示在下面的JSFiddle中）。目前，HighCharts在某些日子里跳过标签。我的客户希望将它们标记为连续/连续数字。

JS Fiddle for HighCharts在这里：http://jsfiddle.net/vecbtw7m/

HighCharts的JavaScript代码：

$('#graphContainer2').highcharts({
    chart: { type: 'column' },
    title: { text: 'Monthly Page Views' },
    xAxis: {
        type: 'datetime',
        title: { text: 'Date' },
        min: new Date('2015/10/15').getTime(),
        max: new Date('2015/10/30').getTime(),
    },
    yAxis: {
        min: 0,
        title: { text: 'Page Views' }
    },
    series: [{
        name: 'Page Views',
        data: [
           [Date.UTC(2015,9,15), 27], [Date.UTC(2015,9,17), 54],
           [Date.UTC(2015,9,20), 42], [Date.UTC(2015,9,24), 13]
        ]
     }]
});

所需结果（黄色）

Answer 1

您可以在xAxis中添加标签格式化程序功能：

xAxis: {
       type: 'datetime',
        title: { text: 'Date' },
        min: new Date('2015/10/15').getTime(),
        max: new Date('2015/10/30').getTime(),
        tickInterval: 24 * 3600 * 1000,
        labels:{
        formatter: function () {
                        return Highcharts.dateFormat('%d', this.value);
                }
}

}

更新jsFiddle

Answer 2

您可以对x轴使用tickInterval选项。

价：

以轴为单位的刻度线的间隔。当为null时，勾选   计算间隔大致遵循tickPixelInterval   线性和日期时间轴。在分类轴上，为null tickInterval   将默认为1，一个类别。请注意，日期时间轴基于   毫秒，因此例如一天的间隔表示为24   * 3600 * 1000。

在对数轴上，tickInterval基于幂，所以a   tickInterval为1表示0.1,1,10,100等中的每一个都有一个勾号   tickInterval为2表示刻度为0.1,10,1000等.tickInterval为   0.2勾选0.1,0.2,0.4,0.6,0.8,1,2,4,6,8,10,20,40等。

如果tickInterval太密集而无法绘制标签，则为Highcharts   可以删除刻度。

代码：

xAxis: {
    type: 'datetime',
    title: { text: 'Date' },
    min: new Date('2015/10/15').getTime(),
    max: new Date('2015/10/30').getTime(),
    tickInterval: 1
},

结果：

演示：http://jsfiddle.net/jpnL65js/

修改

由于注意：

如果tickInterval太密集而无法绘制标签，则为Highcharts 可以删除刻度。

您必须使用其他方式，因此请使用tickPositioner函数并强制显示刻度。

价：

一个回调函数返回数组，用于定义刻度线的放置位置在轴上。这会覆盖默认行为 tickPixelInterval和tickInterval。自动滴答位置是可以通过this.tickPositions访问，并可以通过回调。

代码：

tickPositioner: function () {
    var result = [];
    for (i = 15; i < 31; i++)
    result.push(Date.UTC(2015, 9, i));

    result.info = {
        unitName: "day",
        higherRanks: {} 
    };

    return result;
}

演示：http://jsfiddle.net/ezpo47ua/

结果：

Answer 3

归结为两件事的组合：

tickInterval
pointRange

将点范围和刻度间隔设置为一天，轴将按照您的描述进行对齐和格式化。

示例：

http://jsfiddle.net/jlbriggs/9cL3z64n/

为标签添加额外的格式可以清除它们，否则标签会变得非常草率。

我如何标记月份的日期？

3 个答案:

修改