Question

我正在使用Highcharts显示BoxPlot Chart。以下是此图表的示例：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/

高图-将边界半径添加到箱线图

1 个答案: