Highcharts - добавить радиус границы на график

Question

Я использую Highcharts для отображения диаграммы BoxPlot. Вот пример этого графика: http://jsfiddle.net/tLucL6mq/3/.

$('#container').highcharts({

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

    title: {
        text: 'Sample Base Salary Range'
    },

    legend: {
        enabled: false
    },

    xAxis: {
        categories: ['4', '3', '2', '1', '0'],
        title: {
            text: 'Job Level'
        }
    },

    yAxis: {
        title: {
            text: 'Base Salary'
        }
    },

    plotOptions: {
        boxplot: {
            fillColor: '#F0F0E0',
            lineWidth: 2,
            medianColor: '#0C5DA5',
            medianWidth: 3
        }
    },

    series: [{
        name: "Observation Data",
        data: [
            ['0', 68, 75, 79, 82, 84, 89],  //level 4 - category 0
            ['1', 53, 63, 68, 72, 75, 79],  //level 3 - category 1
            ['2', 47, 52, 59, 64, 67, 68],  //level 2 - category 2
            ['3', 35, 37, 39, 42, 46, 51],  //level 1 - category 3
            ['4', 32, 33, 34, 38, 40, 45]   //level 0 - category 4
        ],
        tooltip: {
            headerFormat: '<b>{point.series.name}</b><br/><em>Job Level: {point.x}</em><br/>',
            pointFormat:  '- Max: {point.high}<br/>' +
                          '- Q3: {point.q3}<br/>' +
                          '- Median: {point.median}<br/>' +
                          '- Q1: {point.q1}<br/>' +
                          '- Min: {point.low}<br/>'
        }
    }]

});

Я хочу добавить радиус границы, но я не нашел эту опцию. Я пытаюсь добавить это во многих позициях. Но безуспешно.

Любая помощь?

Answer 1

Радиус границы по умолчанию не поддерживается в серии боксов Highcharts. Элемент, который вы хотите изменить, это path, поэтому его нельзя сделать простым способом.

Однако, используя Highcharts.SVGRenderer, вы можете заменить элемент path на rect с радиусом границы, например:

        events: {
            render: function() {
                var points = this.series[0].points,
                    pathBBox,
                    path;

                Highcharts.each(points, function(p) {
                    path = p.graphic.element.children[2];
                    pathBBox = path.getBBox();

                    if (!p.additionalElement) {
                        p.additionalElement = this.renderer.rect(pathBBox.x + this.plotLeft, pathBBox.y + this.plotTop, pathBBox.width, pathBBox.height, 5)
                            .attr({
                                stroke: '#7cb5ec',
                                'stroke-width': 1,
                                zIndex: 4
                            })
                            .add();

                    } else {
                        p.additionalElement.attr({
                            x: pathBBox.x + this.plotLeft,
                            y: pathBBox.y + this.plotTop,
                            width: pathBBox.width,
                            height: pathBBox.height
                        });
                    }

                    path.setAttribute('stroke', 'transparent');


                }, this);
            }
        }

Демонстрация в реальном времени: http://jsfiddle.net/BlackLabel/y9umo52w/