基于差异的两条线之间的颜色区域

Question

我有一个包含两条线的图表，我想根据哪条线在另一条线上方为它们之间的区域着色。

此图显示收入和结果，因此如果收入大于结果，则该区域为绿色，但如果结果大于收入，则该区域变为红色。

我在 Highcharts 中找不到执行此操作的好方法。我试过面积图，但它们只是从零开始着色。

我希望图片说明有所帮助，并且有人知道如何做到这一点。

非常感谢。

我的两个数据集只是两个简单的数组，例如

let income = [0, 0, 0, 0, 1000, 1000, 2000, 5000, 9000]
let outcome = [0, 0, 0, 0, 0, 7000, 7000, 7000, 12000]

Answer 1

通过使用zones，您可以沿您想要的轴在给定位置更改颜色。这是语法：

series: {
    name: 'Income',
    data: data,
    zoneAxis: 'x',
    zones: [{value: 1, fillColor: 'green'}, 
            {value: 5, fillColor: 'red}
            ]
}

那个 sn-p 给你两个区域，绿色到 1，红色从 1 到 5。由于手动执行此操作不是很有趣，因此我做了一个自动执行此操作的示例，请参阅 fiddle 或帖子底部：

http://jsfiddle.net/zhjyn2o4/1/

最后你有一个像这样的arearange 图表：

我在 highstock 中完成了此操作，但如果您更喜欢使用 highchart，那么它应该使用相同的代码，但看起来会有些不同。

您可能很想改成areasplinerange（看起来更好）。但是使用样条线很难找到相交点，因此很难正确地为图形着色。

let income = [0, 0, 0, 1000, 1000, 2000, 5000, 9000, 12000, 12000, 12000, 5000, 4000, 10000]
let outcome = [0, 0, 7000, 0, 7000, 7000, 7000, 12000, 9000, 9000, 9000, 5000, 5000, 5000]

//create a function to find where lines intersect, to color them correctly
function intersect(x1, x2, y1, y2, y3, y4) {
  return ((x2 * y1 - x1 * y2) - (x2 * y3 - x1 * y4)) / ((y4 - y3) - (y2 - y1));
}

var ranges = []; //stores all the data for the graph like so [x, y1, y2]
var incomeZones = []; //stores the different zones based on where the lines intersect
var incomeBiggerBool = true; //used for keeping track of what current color is


//loop through all values in income and outcome array (assumes they are same length). Fill the ranges array and create color zones. 
//Zones color up to a given point, therefore we need to push a color at the end, before it intersects
for (i = 0; i < income.length; i++) {
  ranges.push([i, income[i], outcome[i]]); //push to range array

  if (income[i] < outcome[i] && incomeBiggerBool) {
    incomeZones.push({
      value: intersect(i - 1, i, income[i - 1], income[i], outcome[i - 1], outcome[i]),
      fillColor: '#C0D890', // green
    }); //push to zone array 
    incomeBiggerBool = false;
  } else if (income[i] > outcome[i] && !incomeBiggerBool) {
    incomeZones.push({
      value: intersect(i - 1, i, income[i - 1], income[i], outcome[i - 1], outcome[i]),
      fillColor: '#ED4337' // red
    }); //push to zone array 
    incomeBiggerBool = true;
  }
}
//zones color up to a given point, therefore we need to push a color at the end as well:
if (incomeBiggerBool) {
  incomeZones.push({
    value: income.length,
    fillColor: '#C0D890' // green
  })
} else {
  incomeZones.push({
    value: income.length,
    fillColor: '#ED4337' // red
  })
}

var chart = Highcharts.stockChart('container', {

  chart: {
    type: 'arearange'
  },
  credits: {
    enabled: false
  },
  exporting: {
    enabled: false
  },
  rangeSelector: {
    enabled: false
  },
  scrollbar: {
    enabled: false
  },
  navigator: {
    enabled: false
  },
  xAxis: {
    visible: false
  },
  title: {
    text: 'Example'
  },
  plotOptions: {},
  tooltip: {
    //Prettier tooltip:
    pointFormatter: function() {
      return 'Income: <b>' + this.low + '</b> -  Expenditures: <b>' + this.high + '</b>'
    }
  },
  series: [{
    name: 'Income',
    data: ranges,
    zoneAxis: 'x',
    zones: incomeZones
  }]
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/highcharts-more.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>