angularjs - 高图 - 堆积条形聊天：如何在堆积条形图类型中添加中位数

Question

我正在尝试在所有条的中间添加一个中值（垂直条），如何根据添加的系列动态地使用 CSS 添加这个中值。

标签： angularjshighchartsangular7

Answer 1

我认为实现它的最佳方法是使用以下计算 plotLine 并将其添加到图表的功能。

events: {
  load() {
    let chart = this,
      sum = 0,
      i = 0,
      medianValue;

    chart.series.forEach(s => {
      s.points.forEach(p => {
        sum += p.y
        i++;
      })
    })

    medianValue = sum / i;

    chart.yAxis[0].update({
      plotLines: [{
        value: medianValue,
        color: 'red',
        width: 10
      }]
    })
  }
}

演示：https ://jsfiddle.net/BlackLabel/u8a4so3r/

API：https ://api.highcharts.com/highcharts/yAxis.plotLines

API：https ://api.highcharts.com/highcharts/chart.events.load

API：https ://api.highcharts.com/class-reference/Highcharts.Axis#update