Question

有没有办法在High Charts导航器中添加颜色区域？如果它不在区域之间，它应该具有默认颜色。有点像，从这个值到这个值，它有这种颜色，否则它是蓝色的。

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

这就是它目前的样子。

这是代码：

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

任何正确方向的推动都将受到高度赞赏。

Answer 1

我已经回答了以下问题。 Here is the TLDR fiddle example

有没有办法可以为区域定义起点和终点？

您建议的格式无效，但解决方法是使用您想要的“默认颜色”填充带有区域的空白。这意味着将您的map更改为更精细的功能。例如：

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
});

在这里，我想象periods数组与您的reportingPeriods和zones数组匹配，作为您应用于系列的最终产品。

并严格限制着色到导航器？

要仅将区域应用于导航器，只需使用navigator.series对象即可。例如：

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

不要将它们应用于实际系列。

Highcharts - HighCharts导航器的特定颜色区域

1 个答案: