Hicharts.js 带平均线的箱线图

Question

我正在尝试模拟如下图：

但到目前为止，我找到的图表代码如下所示：

这是从以下代码生成的：

Highcharts.chart('container', {

chart: {
    type: 'boxplot'
},

title: {
    text: 'Highcharts box plot styling'
},

legend: {
    enabled: false
},

xAxis: {
    categories: ['1', '2', '3', '4', '5'],
    title: {
        text: 'Experiment No.'
    }
},

yAxis: {
    title: {
        text: 'Observations'
    }
},

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

series: [{
    name: 'Observations',
    data: [
        [760, 801, 848, 895, 965],
        [733, 853, 939, 980, 1080],
        [714, 762, 817, 870, 918],
        [724, 802, 806, 871, 950],
        [834, 836, 864, 882, 910]
    ]
}]

});

如何像第一个图中那样添加另一条线？谢谢？

Answer 1

您的代码所基于的示例似乎是这个：http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/box-plot/

除此之外，您还需要添加一系列类型线来绘制线条，如下所示：

, {
    name: 'Here is a line',
    type: 'line',
    data: [ // x, y positions where 0 is the first category
        [0, 1000],
        [1, 718],
        [2, 951],
        [3, 969],
        [4, 969]
    ]
}

Type 设置为 line 并且值可以像上面 [[x,y], [x1, y1], ...] 或像这样 [y, y1, ...] 给出（其中 y 映射到 x = 0，y1 映射到 x = 1 等等）

还有一条中线绘制出来，由这部分完成：

plotLines: [{
        value: 932,
        color: 'red',
        width: 1,
        label: {
            text: 'Theoretical mean: 932',
            align: 'center',
            style: {
                color: 'gray'
            }
        }
    }]

这只是一条固定值的线。

工作示例： http://jsfiddle.net/y08gyoy1/

Hicharts.js 带平均线的箱线图

Hicharts.js Boxplots with a mean line

javascript

jquery

plot

boxplot

highcharts