Javascript 使用labels.formatter在xAxis上打印目标标签

我有一些

绘图线

，我只需要打印

标签

，对应于我的

xAxis上的那些
绘图线

var getDaysArray = function(start, end) {
  for (var arr = [], dt = start; dt <= end; dt.setDate(dt.getDate() + 10)) {
    arr.push(new Date(dt));
  }
  return arr;
};

function generateDataPoints(noOfDps) {
  var yVal = 100;
  var dps = [];
  var xDate = getDaysArray(new Date("2006-01-01"), new Date("2019-12-30"));
  for (var i = 0; i < xDate.length; i++) {
    yVal = yVal + Math.round(5 + Math.random() * (-5 - 5));
    dps.push({ x: xDate[i], y: yVal });
  }
  return dps;
}

let dataPoints = generateDataPoints(100);

我的数据是一个大约100（
yAxis
）的随机值，日期增加10天（
xAxis
）

我的方法是为
xAxis
定义
labels.formatter
函数

我发现的第一个问题是增量步骤，我尝试了
xAxis.labels.step
，但它不起作用，而我发现
xAxis.tickInterval
它一开始似乎起作用，唯一的问题是，为了防止标签打印在
xAxis
区域之外，格式化程序函数值从我的数据集中的上一个点开始，存在某种偏移，
formatter
函数增量永远不会适合我的数据（偏移问题）。为了解决这个偏移量问题，我尝试了
xAxis.tickPositions
并调用了我的标记数组，从那时起我就能够访问
formatter
函数上的点，唯一的问题是它什么也不返回，我进入了
if
循环，该循环进行检查，但
xAxis.labels
上没有打印任何内容

在我的情节中，我想要的最终结果是这样的：


这是我的代码：

您认为如何使用plotLines.label功能来渲染这些标签？我认为在那里实施这一逻辑会更容易

演示：

API:

function setHighestLowest(dtPoints) {
  let highestIndex = -1;
  let minimumIndex = -1;
  let highestValue = 0;
  let lowestValue = 0;

  for (let i = 0; i < dtPoints.length; i++) {
    let obj = dtPoints[i];
    if (obj.y > highestValue) {
      highestIndex = i;
      highestValue = obj.y;
    }
    if (obj.y < lowestValue || i === 0) {
      minimumIndex = i;
      lowestValue = obj.y;
    }
  }

  dtPoints[0].indexLabel = dtPoints[0].y.toString();
  dtPoints[dtPoints.length - 1].indexLabel = dtPoints[
    dtPoints.length - 1
  ].y.toString();
  if (highestIndex > -1) {
    dtPoints[highestIndex].indexLabel = dtPoints[highestIndex].y.toString();
  }
  if (minimumIndex > -1) {
    dtPoints[minimumIndex].indexLabel = dtPoints[minimumIndex].y.toString();
  }
  //returns -> [max[0], min[1], first[2], last[3]]
  let dateMarker = [
    dtPoints[highestIndex].x,
    dtPoints[minimumIndex].x,
    dtPoints[1].x,
    dtPoints[dtPoints.length - 1].x
  ];
  //console.log(dateMarker);
  return dateMarker;
}