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/

Answer 2

如果有帮助，也可以直接设置当前图形的属性'd'。

function roundCornerBox(pathBBox: { x: number; y: number; width: number; height: number;}, radius: number) {
    const { x, y, width, height } = pathBBox;
    const eightPoints = [
        { x, y: y + radius },
        { x: x + radius, y },
        { x: x - radius + width, y },
        { x: x + width, y: y + radius },
        { x: x + width, y: y + height - radius },
        { x: x + width - radius, y: y + height },
        { x: x + radius, y: y + height },
        { x, y: y + height - radius }
    ];
    const controlPoints = [
        { x, y },
        { x: x + width, y },
        { x: x + width, y: y + height },
        { x, y: y + height }
    ];
    let controlPointIndex = 0, 
        lastCommand = 'Q',
        controlPoint = controlPoints[0];
    let d = '';
    eightPoints.forEach((point, index) => {
        if (index === 0) {
            d += `M ${point.x} ${point.y} `;
            return;
        }
        if (lastCommand === 'Q') {
            controlPoint = controlPoints[controlPointIndex];
            d += `${lastCommand} ${controlPoint.x} ${controlPoint.y} ${point.x} ${point.y}`;
            lastCommand = 'L';
            controlPointIndex++;
         } else {
             d += `${lastCommand} ${point.x} ${point.y} `;
             lastCommand = 'Q';
         }
     });
     d += 'z';
     return d;
};

events: {
    render: function() {
        var points = this.series[0].points,
            pathBBox,
            path;
        var radius = 5;  
            Highcharts.each(points, function(p) {
                path = p.graphic.element.children[2];
                pathBBox = path.getBBox();
                path.setAttribute('d', roundCornerBox(pathBBox, radius));
            }, this);
        }
    }