如果线条超出区域范围，HighChart会更改线条颜色 [英] Highcharts change the line color if its out of the area range

问题描述

快速浏览HighChart文档，我找不到任何选项来更改超出区域范围的线条的颜色。 有没有人能建议一下解决这个问题的方法。提前谢谢。

我试图实现的目标类似于

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

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

推荐答案

使用HighchartsZones我们可以按一定的间隔更改颜色。 我正在扩展@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

如果使用样条线，我仍然不确定如何计算交叉点，但这适用于线性图形和面积。

这篇关于如果线条超出区域范围，HighChart会更改线条颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！