在箱线图图表中填充不同的颜色

时间:2018-10-12 09:21:52

标签: highcharts boxplot

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

请参考下图:

Boxplot Chart Highcharts

2 个答案:

答案 0 :(得分:0)

您可以基于某些算法来计算点颜色,例如:

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/

答案 1 :(得分:0)

是的,有可能控制箱形图的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"
}]