Question

我正在使用highcharts并且我喜欢它们，但我的问题是，当我添加使用圆角插件时，如果我有一个带有0的堆叠图表，那么半径将不会被应用。

问题： Here看看Jun和July。

目标：在这种情况下，我需要一种方法将半径分配到6月左侧和7月右侧。

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'bar'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    plotOptions: {
        bar: {
            stacking: 'normal',
            animation: false
        }
    },
    series: [
        {
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 0, 148.5, 216.4, 194.1, 95.6, 54.4],
            // usage:
            borderRadiusTopLeft: 5,
            borderRadiusTopRight: 5
        }, {
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            // usage:
            borderRadiusBottomRight: 10,
            borderRadiusBottomLeft: 10
        }
    ]
});

Answer 1

您可以根据需要调整rounded-corners.js

(function (H) {
    var curPercentage=[];
    H.wrap(H.seriesTypes.column.prototype, 'translate', function (proceed) {

        var options = this.options,
            rTopLeft = options.borderRadiusTopLeft || 0,
            rTopRight = options.borderRadiusTopRight || 0,
            rBottomRight = options.borderRadiusBottomRight || 0,
            rBottomLeft = options.borderRadiusBottomLeft || 0,
            topMargin = options.topMargin || 0,
            bottomMargin = options.bottomMargin || 0;

        proceed.call(this);

        if (rTopLeft || rTopRight || rBottomRight || rBottomLeft) {

            H.each(this.points, function (point) {
                var iBottomRight = rBottomRight,
                    iBottomLeft = rBottomLeft,
                    iTopRight = rTopRight,
                    iTopLeft = rTopLeft;

                //console.log(point);
                if (typeof(curPercentage[point.index])=='undefined'){
                    curPercentage[point.index]=0;
                }
                var prevPercentage = curPercentage[point.index];
                curPercentage[point.index]+=1.0*parseFloat(point.percentage).toFixed(6);
                //console.log(prevPercentage);
                //console.log(curPercentage);

                if (prevPercentage==0 & curPercentage[point.index] == 100) {
                    // special case, only one value > 0, preserve all border radius
                    // reset for the next call
                    curPercentage[point.index]=0;

                } else if (prevPercentage==0) {
                    //right side
                    iBottomRight = 0;
                    iBottomLeft = 0;
                } else if (curPercentage[point.index] == 100) {
                    //left side
                    iTopRight = 0;
                    iTopLeft = 0;
                    // reset for the next call
                    curPercentage[point.index]=0;
                } else {
                    // no radius
                    iBottomRight = 0;
                    iBottomLeft = 0;
                    iTopRight = 0;
                    iTopLeft = 0;
                }

                var shapeArgs = point.shapeArgs,
                    w = shapeArgs.width,
                    h = shapeArgs.height,
                    x = shapeArgs.x,
                    y = shapeArgs.y;

                // Preserve the box for data labels
                point.dlBox = point.shapeArgs;

                point.shapeType = 'path';
                point.shapeArgs = {
                    d: [
                        'M', x + iTopLeft, y + topMargin,
                    // top side
                    'L', x + w - iTopRight, y + topMargin,
                    // top right corner
                    'C', x + w - iTopRight / 2, y, x + w, y + iTopRight / 2, x + w, y + iTopRight,
                    // right side
                    'L', x + w, y + h - iBottomRight,
                    // bottom right corner
                    'C', x + w, y + h - iBottomRight / 2, x + w - iBottomRight / 2, y + h, x + w - iBottomRight, y + h + bottomMargin,
                    // bottom side
                    'L', x + iBottomLeft, y + h + bottomMargin,
                    // bottom left corner
                    'C', x + iBottomLeft / 2, y + h, x, y + h - iBottomLeft / 2, x, y + h - iBottomLeft,
                    // left side
                    'L', x, y + iTopLeft,
                    // top left corner
                    'C', x, y + iTopLeft / 2, x + iTopLeft / 2, y, x + iTopLeft, y,
                        'Z']
                };

            });
        }

    });
}(Highcharts));

Working JSFiddle demo

通过此更改，您需要设置所有系列的边框半径

series: [{
        data: [50, 71.5, 106.4, 129.2, 144.0, 176.0, 0, 148.5, 216.4, 194.1, 95.6, 54.4],
        // usage:
        borderRadiusTopLeft: 5,
        borderRadiusTopRight: 5,
        borderRadiusBottomRight: 5,
        borderRadiusBottomLeft: 5,        
    }, {
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        borderRadiusBottomRight: 10,
        borderRadiusBottomLeft: 10,
        borderRadiusTopLeft: 10,
        borderRadiusTopRight: 10
    }]

当值为0时，使用堆积条形向Highcharts条形图添加圆角

1 个答案: