Question

我正在制作区域图表。

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

对于数据结构，我每个月有4周的汇总数据例如：Sep1-7：0，Sep8-15：20，依此类推。

图表工作正常，它显示所有数据点（每月5点）

然而，对于x轴标签，我想要的是始终显示＆＃34; 9月，10月，11月，12月，1月和＃34;，无论图表大小是多少，因为现在，如果您调整大小broswer，图表调整大小，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，但它不允许使用Month。我已经尝试过标签格式化程序，但它并没有返回所有标签，似乎hightcharts在进入格式化程序函数之前做了一些过滤。

Answer 1

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

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

数组的第一个数字定义了间隔，因此对于我设置为1的每个月，您只显示标签，第一个值为2个月。数组上的下一个数字是允许的倍数，你的要求不需要这个，一个简单的月份，[1]就行了。有关详细信息，请查看Api Reference。

Answer 2

您可以使用tickPositioner，例如：http://jsfiddle.net/b8eoszt0/2/

        tickPositioner: function(min, max) {
          var ticks = this.tickPositions, // original ticks
              newTicks = [],              // container for a new ticks
              start = new Date(ticks[0]); // first tick 

          // render tick in a first day of the month
          start.setDate(1);

          // add labels, one for every month:
          while (min <= max) {
            start.setMonth(start.getMonth() + 1);
            min = start.getTime(); 
            newTicks.push(min);
          }

          // store original info of labels:
          newTicks.info = ticks.info;
          return newTicks;
        },

highcharts.js如何强制x轴标签显示所有月份而不管图表大小

2 个答案: