Question

我正在处理日期 - 时间问题高图，我希望x轴勾选间隔每月出现(jan-12, Feb-12, Mar-12)。但如果数据点小于4，那么x轴标签也会开始显示月份的日期(10 dec,24 dec, 7 jan)。如何确保即使数据点较少或图表被缩放，也可以按月计算滴答间隔。这是x轴的代码：

xAxis : {
                        type: 'datetime',
                        tickmarkPlacement:'on',
                        dateTimeLabelFormats: {
                            month: '%b-%y',
                            },
                        minRange:1*30*24*60*60*1000,
                        labels : {
                            rotation :'280',
                            align:'right',
                            style: {
                                fontFamily : 'Helvetica',
                                fontSize: '10px'
                            }
                        }
                    }

先谢谢

Answer 1

正如我之前的评论中所提到的，获得你所要求的最简单的方法是设置tickInterval：

xAxis: { 
  type: 'datetime',
  tickInterval:86400000 * 30
}

示例：

http://jsfiddle.net/jlbriggs/Lmfa5v55/

使用此设置，您的数据所处的时间间隔无关紧要 - 在示例中，它是每天 - 或者它是否是不规则间隔的。

无论在什么级别的缩放或多少数据点，您都会在数据范围内的每个月都有一个标记和标签。

Answer 2

试着把精确的间隔打勾，会自动出现日或月。

你只需要格式标签，打勾后。

      Options.xAxis.tickPositioner = function () {
        const ticks = this.series[0].xData;
        let result = [];

        for (let index = 0; index < ticks.length; index++) {
          result.push(ticks[index]);
        }
        return result;
      };

并格式化 xAxis 标签： { 格式：“{值：%b-%Y}”，居中对齐” }

工具提示工具提示：{ 值后缀："", 值前缀："", xDateFormat: "%B - %Y", 值小数：0 },

Answer 3

这里的问题是并非所有月份都有30天，最好不要设置tickInterval或minRange。您可以尝试自己生成月份，例如：

startDate = Date.UTC(2012, 1, 1); //your starting date
// Set the xaxis value as first day of month
for (var i = 0; i < yourData.length; i++) {
    var d = new Date();
    d.setTime(startDate);
    d.setMonth(d.getMonth() + i);
    categories.push(d.getTime());
}

或生成您自己的类别，如Highcharts演示页面所示：

xAxis: {
            categories: [
                'Jan',
                'Feb',
                'Mar',
                'Apr',
                'May',
                'Jun',
                'Jul',
                'Aug',
                'Sep',
                'Oct',
                'Nov',
                'Dec' //etc.
            ],
        },

在http://jsfiddle.net/gjkde5np/1/

上查看第一个选项的工作演示

摘自：How to set PointIntervals per month in HighChart

您还可以检查来自highcharts的代码＆＃34;时间序列，不规则的间隔＆＃34; http://www.highcharts.com/demo/spline-irregular-time。他们在这里使用[Date.UTC(1970, 9, 21), 0], [Date.UTC(1970, 10, 4), 0.28]

最小刻度间隔（每月）不适用于日期时间高亮图

3 个答案: