Question

有没有办法在highcharts中创建图表，以便显示每个相关月份的第一个？例如，在chart中，我如何设置选项，使其显示10月1日，11月1日，12月1日，1月1日等。如果它显示其他日期也很好，但是本月的第一个是必需的。

Answer 1

这绝对是可能的，虽然有点工作。

首先，您需要将要在图表中使用的数据设为全局数据。您可以在使用.highcharts()函数之前通过定义它来执行此操作。我们暂时将此全局数据称为var DATA。

我们想使用highchart的known bug来获取您所追求的格式。所以我们需要定义这些精确的刻度。我已经编写了一些代码来实现这一点（给定全局DATA）：

var globalMin = Date.UTC(5000, 1, 1);
var globalMax = 0;
for (i = 0; i < DATA.length; i++) {
    var temp = DATA[i].slice();
    var sorted = temp.sort(function(d1, d2){
        return d2[0]-d1[0];
    });
    var max_date = sorted[0];
    var min_date = sorted[sorted.length-1];
    if (max_date[0] > globalMax)
        globalMax = max_date[0];
    if (min_date[0] < globalMin)
        globalMin = min_date[0];
}

function monthDiff(d1, d2) {
    return d2.getMonth()-d1.getMonth() + (12 * (d2.getFullYear()-d1.getFullYear())) + 2;
}

var ticks = [];
var mind = new Date(globalMin);
var maxd = new Date(globalMax);
for (i = 0; i < monthDiff(mind, maxd); i++) {
    var tempDate = new Date(new Date(mind).setMonth(mind.getMonth()+i));
    ticks.push(tempDate.setDate(1));
}

此代码创建数组ticks，其中包含高架图定义中的tickPositions for。

所以剩下的就是在xAxis定义中使用这个数组：

xAxis: {
    type: 'datetime',
    tickPositions: ticks,
    min: ticks[0],                   // Remove this if you want an automatic range
    max: ticks[ticks.length - 1],    // Remove this if you want an automatic range
    dateTimeLabelFormats: {
        month: '%e. %b',
        year: '%b'
    },
    title: {
        text: 'Date'
    },
    labels: {
        formatter: function () {
            return Highcharts.dateFormat('%e. %B', this.value);
        }
    },
}, ...

请注意，我在此处使用了一个解决方法来解决DEMO并正确显示tickPositions。

在highcharts上显示每个月的第1个月

1 个答案:

{{3}}