在箱线图Highcharts中填充不同的颜色答案

【问题标题】：Fill different colors in boxplot chart Highcharts在箱线图Highcharts中填充不同的颜色
【发布时间】：2018-10-12 20:26:01
【问题描述】：

我们可以在Highcharts的箱线图中填充这样的颜色吗？

请参考下图：

【问题讨论】：

你好@Nimisha Jain。很高兴在这里见到你。正如我所看到的，您是新的贡献者，因此我不会否决您的问题。在提出任何问题之前，请阅读stackoverflow.com/help/how-to-ask。附：我认为你应该在 Meta Stackover Flow 中而不是在这里问这类问题。快乐的编码！
@rarblack - 我不认为这是一个元问题，因为它本身不是关于 stackoverflow 的问题
不是元问题。但是@Nimisha 最好展示一些您已经完成的示例代码以及您已经尝试过的资源类型。

标签： highcharts boxplot

【解决方案1】：

您可以根据一些算法计算点颜色，例如：

chart: {
    type: 'boxplot',
    events: {
        load: function(){
            var points = this.series[0].points,
                color,
                length = points.length;

            Highcharts.each(points, function(point, i){
                color = 'rgb(255,' + Math.floor(i * 255 / length) + ', 0)'
                point.update({ fillColor: color }, false)
            });

            this.redraw();
        }
    }
}

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

【讨论】：

【解决方案2】：

是的，可以控制fillColor 的箱线图。

这是一个向您展示的演示： http://jsfiddle.net/mqunbjrs/

如果您查看 highcharts API，您会发现，您可以使用具有命名值的对象，而不是使用具有 6 个绘图值的数组：https://api.highcharts.com/highcharts/series.boxplot.data

而不是这个：

data: [
[0, 3, 0, 10, 3, 5],
[1, 7, 8, 7, 2, 9],
[2, 6, 9, 5, 1, 3]
]

你会使用这个：

data: [{
    x: 1,
    low: 4,
    q1: 9,
    median: 9,
    q3: 1,
    high: 10,
    name: "Point2",
    fillColor: "#00FF00"
}, {
    x: 2,
    low: 5,
    q1: 7,
    median: 3,
    q3: 6,
    high: 2,
    name: "Point1",
    fillColor: "#FF00FF"
}]

【讨论】：