javascript - highcharts.js 如何强制 x 轴标签显示所有月份，无论图表大小如何

Question

我正在制作面积图。

http://jsfiddle.net/b8eoszt0/

我的例子有点复杂或者与我们通常看到的不同。

对于数据结构，我每个月都有 4 周的汇总数据例如:Sep1-7: 0, Sep8-15: 20 等等。

图表工作正常，它显示所有数据点(每月 5 个点)

但是，对于 x 轴标签，我想要的是始终显示“Sep、Oct、Nov、Dec、Jan”，无论图表大小是什么，因为现在，如果您调整浏览器大小，图表也会调整大小，a 轴标签发生变化。有时项目较少，有时项目较多。

$(function () {
$('#container').highcharts({
    chart: {
        type: 'area'
    },
    xAxis: {
        opposite: true,
        type: 'datetime',
        dateTimeLabelFormats: { // don't display the dummy year
            day: '%b %e',
            week: '%b %e',
            month: '%b'
        },
        lineWidth: 0,
        startOnTick: false,
        endOnTick: false,
        tickWidth: 0
    },
    yAxis: {
        gridLineWidth: 0
    },
    series:[
      {
        showInLegend: false,  
        data: [
            [Date.UTC(2015, 8, 1), 0],
            [Date.UTC(2015, 8, 8), 30],
            [Date.UTC(2015, 8, 15), 20],
            [Date.UTC(2015, 8, 22), 50],
            [Date.UTC(2015, 8, 29), 20],
            [Date.UTC(2015, 9, 1), 0],
            [Date.UTC(2015, 9, 8), 30],
            [Date.UTC(2015, 9, 15), 20],
            [Date.UTC(2015, 9, 22), 50],
            [Date.UTC(2015, 9, 29), 20],
            [Date.UTC(2015, 10, 1), 0],
            [Date.UTC(2015, 10, 8), 30],
            [Date.UTC(2015, 10, 15), 20],
            [Date.UTC(2015, 10, 22), 50],
            [Date.UTC(2015, 10, 29), 20],
            [Date.UTC(2015, 11, 1), 0],
            [Date.UTC(2015, 11, 8), 30],
            [Date.UTC(2015, 11, 15), 20],
            [Date.UTC(2015, 11, 22), 50],
            [Date.UTC(2015, 11, 29), 20],
            [Date.UTC(2016, 0, 1), 0],
            [Date.UTC(2016, 0, 8), 30],
            [Date.UTC(2016, 0, 15), 20],
            [Date.UTC(2016, 0, 22), 50],
            [Date.UTC(2016, 0, 29), 20],
            ]              
        }
   ],
});

});

我尝试过pointinterval，但它不允许月份。我尝试过标签格式化程序，但它没有返回所有标签，似乎 hightcharts 在进入格式化程序函数之前做了一些过滤。

Answer 1

您可以在轴上设置类型并定义单位。
检查fiddle 。我已在您的 xAxis.xml 中添加了以下代码:希望这会有所帮助。

 type: 'datetime',
  units: [
    [
      'month', [1, 3, 6]
    ]
  ]

数组的第一个数字定义了间隔，因此对于我设置的每个月 1，您只显示标签两个月，第一个值将是 2。数组中的下一个数字是允许的倍数，例如您的要求不需要，一个简单的“月”，[1] 就可以了。检查Api Reference了解更多信息。