javascript - 如何在 Highcharts 中创建曲线下的突出区域？

Question

我使用 Angular 4 创建了一个 Highcharts ，我想突出显示 Highchart 的特定部分。
例如图像:https://www.screencast.com/t/MHxo59j2dM

如上图所示，如果数据点值低于某个限制(例如 0)，则用“红色”颜色突出显示，如果数据点值低于 8，则用黄色突出显示>

我不确定 Highchart 是否可行，但如果有人创建了此类功能，请告诉我。

Highchart 提供面积图选项 - https://www.highcharts.com/demo/area-negative但我的图表是正常的，我不想突出显示所有系列点。

Answer 1

Highcharts 中没有此类功能，但您可以通过使用多边形系列和绘图线来模仿它:

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

    plotOptions: {
    polygon: {
        showInLegend: false
    }
  },

    yAxis: {
    tickInterval: 1,
    plotLines: [{
        value: 4,
      color: 'orange',
      width: 2
    }, {
        value: 3,
      color: 'red',
      width: 2
    }]
  },

  series: [{
    data: [6, 4, 3, 1, 2, 3, 4, 7]
  }, {
    type: 'polygon',
    data: [[1,4], [2, 4], [2,3]],
    color: 'orange'
  }, {
    type: 'polygon',
    data: [[5,4], [6, 4], [5,3]],
    color: 'orange'
  }, {
    type: 'polygon',
    data: [[2,3], [5, 3], [4,2], [3,1], [2,3]],
    color: 'red'
  }]
});

现场工作示例: http://jsfiddle.net/kkulig/fbomb7cf/

需要一些编程才能使创建这些区域的过程自动进行(在我的 fiddle 中，所有内容都是硬编码的)。

要实现类似的样式，您可以尝试图案填充 Highcharts 插件:https://www.highcharts.com/blog/extension/pattern-fill/

<小时/>

API 引用:

• http://api.highcharts.com/highcharts/series.polygon
• http://api.highcharts.com/highcharts/yAxis.plotLines