如何更改箱线图高图中的高低晶须颜色？

Question

这是link到fiddle

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/box-plot-styling/

下面是绘图选项。

plotOptions: {
        boxplot: {
            boxDashStyle: 'Dash',
            fillColor: '#F0F0E0',
            lineWidth: 2,
            medianColor: '#0C5DA5',
            medianDashStyle: 'ShortDot',
            medianWidth: 3,
            stemColor: '#A63400',
            stemDashStyle: 'dot',
            stemWidth: 1,
            whiskerColor: '#3D9200',
            whiskerLength: '20%',
            whiskerWidth: 3
        }
    }

此箱线图以绿色显示高值和低值。在我的例子中，我需要将高值 (Q1) 颜色更改为红色，将低值颜色更改为绿色。

我该怎么做？

谢谢

Answer 1

目前在 Highcharts 中默认不可能 - 相关 github 问题：https://github.com/highcharts/highcharts/issues/6796

Currently each box is a single SVG shape and a border is applied by stroke parameter which cannot be "separated" for smaller edges. As a result, you can apply only single color. Your goal requires a rebuild core of boxplot, so we cannot threat it as a bug, but feature request.

作为解决方法，您可以渲染自定义路径以覆盖现有的胡须之一，例如：

events: {
  render: function() {
    var series = this.series[0],
      attr,
      paths;

    series.points.forEach(function(point) {
      paths = point.whiskers.d.split('M');
      attr = {
        d: 'M' + paths[1],
        'stroke-width': 2,
        stroke: 'red'
      };

      if (point.customHigh) {
        point.customHigh.attr(attr);
      } else {
        point.customHigh = this.renderer
          .path()
          .attr(attr)
          .add(series.group);
      }
    }, this);
  }
}

现场演示： https://jsfiddle.net/BlackLabel/vcefbk46/

API参考：https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path

如何更改箱线图高图中的高低晶须颜色？

How to change high and low whisker color in boxplot highcharts?

boxplot

highcharts