Question

我使用角度4创建一个高图表，我想突出显示Highchart的特定部分前图片：https://www.screencast.com/t/MHxo59j2dM

如上图所示，如果数据点值低于某个限制（如0），则以“红色”颜色突出显示，如果低于8则突出显示黄色

我不确定是否可以使用Highchart，但如果有人创建了这种功能，请告诉我。

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

Answer 1

Highcharts中没有这样的功能，但您可以使用 polygon 系列和绘图线来模仿它：

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/

这将需要一些编程来自动创建这些区域的过程（在我的小提琴中，一切都是硬编码的）。

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

API参考：

如何在高图表中创建曲线下的高光区域？

1 个答案: