Javascript Highcharts-Highcharts navigator的特定颜色区域

有没有办法向High Charts navigator添加颜色区域？如果它不在一个区域之间，它应该有一个默认的颜色。比如，从这个值到这个值，它有这个颜色，否则它是蓝色的

我基本上有一些报告期，有开始和结束日期以及特定的颜色。我希望每个报告期都能以各自的颜色出现在High Charts navigator上。我有一些工作，使用区域，但对于没有报告期的区域，它会采用下一个区域的颜色

这就是它目前的样子。

下面是代码：

const zones = reportingPeriods.map((rp, i) => {
    return {
        value: new Date(rp.endDate),
        color: rp.color
    }
})

const seriesData = _.map(graphData, (metricData, key) => {
    return {
        name: key,
        data: metricData.sort(function(a, b) {
            return a[0] - b[0];
        }),

        zoneAxis: 'x',
        zones: zones,
        tooltip: {
            valueDecimals: 0
        },

        visible: false
    }
})

const graphOptions = {
    rangeSelector: {
        selected: 1
    },
    navigator: {
        maskFill: 'rgba(0, 0, 0, 0.25)'
    },
    backgroundColor: {
        linearGradient: [0, 0, 500, 500],
        stops: [
            [0, 'rgb(255, 255, 255)'],
            [1, 'rgb(200, 200, 255)']
        ]
    },
    title: {
        text: group.groupName
    },
    series: seriesData,
    credits: false,
    legend: {
        enabled: true
    }
}

有没有一种方法可以定义分区的起点和终点？并且严格限制领航员上色

理想情况下，如果分区可以这样定义就好了：

from: rp.startDate,
to: rp.endDate,
color: rp.color

---

任何朝着正确方向的努力都将不胜感激

我已经回答了下面的问题

有没有一种方法可以定义分区的起点和终点

您建议的格式无效，但解决方法是使用您想要的“默认颜色”用区域填充空白。这意味着将

映射更改为更精细的函数。例如：

periods = [
  { start: 2,  end: 5,  color: 'green' },
  { start: 5,  end: 7,  color: 'pink' },
  { start: 10, end: 15, color: 'red' },
  { start: 19, end: 21, color: 'yellow' }
];

defaultColor = 'black';
zones = [];

for(var i = 0; i < periods.length; i++) {
  // This zone is a "in-between" zone to fill the blanks.
  zones.push({
    value: periods[i].start,
    color: defaultColor
  });

  // This zone is an actual period
  zones.push({
    value: periods[i].end,
    color: periods[i].color
  });
}

// This zone is cover the values from your last period to infinity
zones.push({
  color: defaultColor
});

navigator: {
  series: {
    type: 'line',
    zones: zones
  }
}

而不是将它们应用到实际的系列中。
哦，你是绝对的传奇人物，这是完美的。我觉得自己有点傻，我没有想到这一点。非常感谢你的帮助。