Question

快速浏览高级图表文档，我无法找到任何更改超出区域范围的线条颜色的选项。任何人都可以建议一种方法来解决这个问题。提前谢谢。

我想要达到的目标与

类似

https://www.highcharts.com/demo/arearange-line

http://jsfiddle.net/277x657h/2/

Answer 1

使用 Highcharts Zones，我们可以在特定时间间隔更改颜色。我正在扩展 @KamilKulig's answer above。

如果对点和面积范围使用线性线，还可以计算面积范围和线的交点。它看起来像这样：（这是一个演示这个的 fiddle。）

function findAnomalyZones(intervals, values) {
  let validColor = '#25cc7b', anomalyColor = '#ff5f5f';
  let zones = Array();
  let prev = null;
  let anomalyType = null; // 1 for above Confidence interval. -1 for below
  for (let i = 0; i < values.length; i++) {
        let interval = intervals[i], value = values[i];
    let zone = {value: value[0]};


        // point is an anomaly  
    if (value[1] < interval[1]) {
      anomalyType = -1;
      zone.color = anomalyColor;
    }
    else if (value[1] > interval[2]) {
            anomalyType = 1;
            zone.color = anomalyColor;
    }
    else {
        zone.color = validColor;
    }
    
    // Push prev zone if colors should be different
    // Update prev zone
        if (prev != null && prev.color != zone.color) {
        const interIdx = anomalyType == 1 ? 2 : 1;
      let {m: m1, b: b1} = findSlopeAndYIntercept([intervals[i-1][0], intervals[i-1][interIdx]], [interval[0], [interval[interIdx]]]);
      let {m: m2, b: b2} = findSlopeAndYIntercept(values[i-1], value);
      let {x, y} = findLineIntercept(m1, b1, m2, b2);
      
      prev.value = x
        zones.push(prev);
    }
    prev = zone;
  }
  
  zones.push({value: Date.UTC(9999), color: validColor})
  return zones
}

function findSlopeAndYIntercept(p1, p2) {
    const m = (p2[1] - p1[1]) / (p2[0] - p1[0]);
  const b = p1[1] - (m * p1[0])
  return {m, b}
}

function findLineIntercept(m1, b1, m2, b2) {
    let x = (b2 - b1) / (m1 - m2);
  let y = (m1 * x) + b1
  return {x, y}
}

let zones = findAnomalyZones(intervals, values);
// PLOT THE HIGHCHART HERE

如果使用样条，我仍然不确定如何计算交点，但这适用于线性图和区域范围。

Answer 2

请参阅主题的Highcharts文档。

https://www.highcharts.com/docs/chart-design-and-style/themes

Highcharts.theme = {
    colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', 
         '#FF9655', '#FFF263', '#6AF9C4'],
    chart: {
        backgroundColor: {
            linearGradient: [0, 0, 500, 500],
            stops: [
                [0, 'rgb(255, 255, 255)'],
                [1, 'rgb(240, 240, 255)']
            ]
        }
    }
}

如果超出区域范围，Highcharts会更改线条颜色

2 个答案: