着色系列的不同部分不同的颜色

时间:2014-08-20 21:10:58

标签: jquery css highcharts

嗨,我对highcharts很新,但我想知道是否有人能告诉我如何改变系列不同部分的颜色。

例如这里是小提琴。 http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/box-plot/

$(function () {
    $('#container').highcharts({

        chart: {
            type: 'boxplot',
            inverted: true
        },

        title: {
            text: 'Highcharts Box Plot Example'
        },

        legend: {
            enabled: false
        },

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

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

        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]
            ],
            tooltip: {
                headerFormat: '<em>Experiment No {point.key}</em><br/>'
            }
        }, {
            name: 'Outlier',
            color: Highcharts.getOptions().colors[0],
            type: 'scatter',
            data: [ // x, y positions where 0 is the first category
                [0, 644],
                [4, 718],
                [4, 951],
                [4, 969]
            ],
            marker: {
                fillColor: 'white',
                lineWidth: 1,
                lineColor: Highcharts.getOptions().colors[0]
            },
            tooltip: {
                pointFormat: 'Observation: {point.y}'
            }
        }]

    });
});

有谁知道如何让每个系列中的线条成为一种颜色和方框 该系列另一种颜色?

例如, 在下面的图片中,我想知道是否可以使系列的每个部分都用我突出显示的颜色。

enter image description here

谢谢!

1 个答案:

答案 0 :(得分:2)

有几种方法可以控制箱线图上的颜色。例如:

plotOptions: {
    boxplot: {
        color: 'red',
        whiskerColor: 'blue',
        stemColor: 'green',
        medianColor: 'yellow'
    }
}

正如您所看到的那样,盒子,中位数,须状物和茎可以分别着色。

请参阅this updated JSFiddle demonstration

有关boxplot的完整选项列表,请参阅the API documentation