格式化 x 轴后，初始值和最终值未正确出现

Question

甘特图x轴有两行。第一行代表月份，第二行代表每个月的天数（1-15和15-30范围）。按照上述要求修改数据后，上个月的第二行未显示第二个半日期（例如，如果最后一个月是 12 月，那么在第二行中只有 1-15 即将到来）

// THE CHART
Highcharts.ganttChart('container', 
{
     xAxis:  [
        //start date(1-15/16-30)
        {
          grid: {
            enabled: true,
          },
          className: 'dateRange-axis',
          style: {            
          },
          labels: {
            align: 'center',
            useHTML: true,
            style: {
            },
            formatter: function () {
              let lastDisplayDate;
              let date = new Date(this.value);
              let currentDate = moment(moment(date).valueOf()).utc().format("DD");
              const M = moment(moment(date).valueOf()).utc().format();
              let lastDate = moment(M).utc().daysInMonth();
              if (parseInt(currentDate) > 1 && parseInt(currentDate) < 15) {
                currentDate = '01';
              }
              if (parseInt(currentDate) > 16) {
                currentDate = 16;
              }
              if (parseInt(currentDate) != 1) {
                lastDisplayDate = lastDate
              } else {
                lastDisplayDate = parseInt(currentDate) + 14
              }

              let lable = currentDate + '-' + JSON.stringify(lastDisplayDate)
              return lable;
            }
          },          
          tickInterval: 24 * 60 * 60 * 1000, // 1 day
          tickPositioner: function (min, max) {
            var interval = this.options.tickInterval,
              ticks = [],
              count = 0;

            while (min < max) {
              let date = new Date(min);
              let currentDate_t = moment(moment(date).valueOf()).utc().format("DD");
              
              if (parseInt(currentDate_t) < 15 && count != 0) {
                const day_diff = parseInt(currentDate_t) - 1
                min = min - (this.options.tickInterval * day_diff)
              }

              date = new Date(min);
              const M = moment(moment(date).valueOf()).utc().format();
              let lastDate = moment(M).utc().daysInMonth();
              let currentDate = moment(moment(date).valueOf()).utc().format("DD");

              if (lastDate == 30 || parseInt(currentDate) == 1) {
                interval = this.options.tickInterval * 15;
              }
              if (lastDate == 31 && parseInt(currentDate) != 1) {
                interval = this.options.tickInterval * 16;
              }
              if ((lastDate == 28 || lastDate == 29) && parseInt(currentDate) != 1) {
                if (lastDate == 28)
                  interval = this.options.tickInterval * 13;
                if (lastDate == 29)
                  interval = this.options.tickInterval * 14;
              }
              ticks.push(min);
              min += interval;
              count++;
            }
            
            return ticks;
          }
        },
        {
          grid: {
            enabled: true                     
          },
          className: 'month-axis',
          tickColor: 'transparent',
          tickInterval: 1000 * 60 * 60 * 24 * 30, // months row
          labels: {
            align: 'center',
            style: {
              fontWeight: 'bold'
            },
            formatter: function () {
              let month = moment(moment(this.value)).utc().format("MMM");
              return month;
            }
          },
        }
      ],
  yAxis: {
    type: 'category',
    visible: false,
  },
  series: [{
    name: 'Project 1',
    data: [
   {
      name: 'project 1',
      start: Date.UTC(2014, 1, 1),
      end: Date.UTC(2014, 10, 25),
      assignee: 'Richards',
      y: 0
    }, {
      name: 'project 2',
      start: Date.UTC(2014, 10, 27),
      end: Date.UTC(2014, 11, 15),
      assignee: 'Richards',
      y: 1
    }, 
    {
      name: 'project 3',
      start: Date.UTC(2014, 11, 20),
      end: Date.UTC(2014, 11, 25),
      assignee: 'Richards',
      y: 2
    }, {
      name: 'project 4',
      start: Date.UTC(2014, 11, 23),
      end: Date.UTC(2014, 11, 30),
      assignee: 'Richards',
      y: 3
    }
    ],
    dataLabels: {  
   "align":"center",
   "format": "{point.name}",
   "padding":5,
     "font-size" : '7px',
    "font-weight" : 400,
   "verticalAlign":"bottom",

}
  }]
});

#container {
  max-width: 800px;
  min-width: 400px;
  height: 400px;
  margin: 1em auto;
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/gantt/modules/gantt.js"></script>
<script src="https://code.highcharts.com/gantt/modules/exporting.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.js"></script>
<div id="container"></div>

Answer 1

首先我认为您可能希望将endOnTick 设置为true (API)，因为它是默认的false。可能还有startOnTick 到true (API)：

xAxis:  [{
        endOnTick: true,
        startOnTick: true,
        // ...
}]

其次，您的tickPositioner 不会为最后一个位置生成报价。它在上个月月底之前停止，因为它在最大值处停止。目前您有：

tickPositioner: function (min, max) {
    // ...
    while (min < max) {
        // ...
    }
}

让它再做一轮的简单解决方法是：

tickPositioner: function (min, max) {
    var last = false;
    // ...
    while (min < max || !last) {
        if(min >= max)
            last = true;
        // ...
    }
}

查看JSFiddle demonstration 的实际应用。