Hicharts.js箱线图与平均线

I am trying to simulate a graph like the following:

我试图模拟如下图：

But so far I have found code for a graph that looks like:

但到目前为止，我已经找到了一个图形代码，如下所示：

this was generated from the following code:

这是从以下代码生成的：

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]
    ]
}]

});

How do I add a another line like in the first plot in this one? Thanks?

如何在此第一个图中添加另一行？谢谢？

1 个解决方案

#1

The example you have based your code on seems to be this one: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/box-plot/

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

In addition to that you need to add a series of type line to plot the line, like this:

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

, {
    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 is set to line and values can be given either like above [[x,y], [x1, y1], ...] or like this [y, y1, ...] (where y is mapped to x = 0, y1 mapped to x = 1 etc.)

类型设置为line，值可以像上面的[[x，y]，[x1，y1]，...]一样给出，或者像[y，y1，...]那样给出（其中y映射到x = 0，y1映射到x = 1等）

There is also a mean line plotted, which is done by this part:

还绘制了一条平均线，由以下部分完成：

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

This is just a line at a constant value.

这只是一个恒定值的线。

Working example: http://jsfiddle.net/y08gyoy1/

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

#1