Заполните разные цвета в диаграмме бокса Highcharts

Question

Можем ли мы заполнить цвета таким образом в диаграмме коробчатых диаграмм Highcharts?

Пожалуйста, обратитесь к изображению ниже:

Answer 1

Да, можно управлять fillColor для коробочного графика.

Это демонстрация, чтобы показать вам: http://jsfiddle.net/mqunbjrs/

Если вы посмотрите на 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"
}]

Answer 2

Вы можете рассчитать цвет точек на основе некоторого алгоритма, например:

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/