highcharts柱状图设置渐变色，设置圆角

设置渐变色/圆角

---

1、设置渐变色：修改Highcharts对象中的colors数组各颜色值即可。

var scancolors = ['#a524ff', '#ff4f76'];
Highcharts.getOptions().colors = Highcharts.map(scancolors, function (scancolors) {
    return {
        radialGradient: { cx: 0, cy: -0.8, r: 3 },
        stops: [[0, scancolors], [1, Highcharts.Color(scancolors).brighten(1).get('rgb')]]
    };
}); 
var scanchars_option = {
    chart: {
        type: 'column',
        renderTo: 'scanchars'
    },
    title: {
        text:null
    },
    subtitle: {
        text: null
    },
    xAxis: {
        categories: [
            '第一周','第二周','第三周','第四周'
        ],
        crosshair: true
    },
    yAxis: {
        min: 0,
        title: {
            text: '次数 (次)'
        },
        gridLineDashStyle: 'longdash'
    },
    tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
        '<td style="padding:0"><b>{point.y} 次</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            borderWidth: 0
        }
    },
    series: [{
        name: '设备1',
        data: [49, 71, 106, 129] 
    }, {
        name: '设备2',
        data: [83, 78, 98, 93]
    }]
}
var scanchars = new Highcharts.Chart(scanchars_option);

效果：

2、设置圆角：在highchars官方API中存在borderRadius属性，但是使用该属性后会将highchars柱状图中的四个角都会应用上圆角样式，但是实际需求中仅仅是想要左上边角和右上边角应用圆角样式，以下是解决方案：

左上角圆角半径：borderRadiusTopLeft:Number
右上角圆角半径：borderRadiusTopRight:Number
左下角圆角半径：borderRadiusBottomLeft:Number
右下角圆角半径：borderRadiusBottomRight:Number

将下列代码新建js文件在highchar.js之后，即可使用上述属性。

(function (H) {
    var rel = H.relativeLength;

    H.wrap(H.seriesTypes.column.prototype, 'translate', function (proceed) {
        var options = this.options,
            topMargin = options.topMargin || 0,
            bottomMargin = options.bottomMargin || 0;

        proceed.call(this);

        H.each(this.points, function (point) {
            var shapeArgs = point.shapeArgs,
                w = shapeArgs.width,
                h = shapeArgs.height,
                x = shapeArgs.x,
                y = shapeArgs.y;

            // Get the radius
            var rTopLeft = rel(options.borderRadiusTopLeft || 0, w),
                rTopRight = rel(options.borderRadiusTopRight || 0, w),
                rBottomRight = rel(options.borderRadiusBottomRight || 0, w),
                rBottomLeft = rel(options.borderRadiusBottomLeft || 0, w);
        
            if (rTopLeft || rTopRight || rBottomRight || rBottomLeft) {
            
                // Correct for small columns (#7)
                if (rTopLeft > (w / 2)) {
                    rTopLeft = w / 2;
                }

                if (rTopRight > (w / 2)) {
                    rTopRight = w / 2;
                }

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

                point.shapeType = 'path';
                point.shapeArgs = {
                    d: [
                        'M', x + rTopLeft, y + topMargin,
                        // top side
                        'L', x + w - rTopRight, y + topMargin,
                        // top right corner
                        'C', x + w - rTopRight / 2, y, x + w, y + rTopRight / 2, x + w, y + rTopRight,
                        // right side
                        'L', x + w, y + h - rBottomRight,
                        // bottom right corner
                        'C', x + w, y + h - rBottomRight / 2, x + w - rBottomRight / 2, y + h, x + w - rBottomRight, y + h + bottomMargin,
                        // bottom side
                        'L', x + rBottomLeft, y + h + bottomMargin,
                        // bottom left corner
                        'C', x + rBottomLeft / 2, y + h, x, y + h - rBottomLeft / 2, x, y + h - rBottomLeft,
                        // left side
                        'L', x, y + rTopLeft,
                        // top left corner
                        'C', x, y + rTopLeft / 2, x + rTopLeft / 2, y, x + rTopLeft, y,
                        'Z'
                    ]
                };
            }
                
        });
    });
}(Highcharts));

修改之后的代码：

var scancolors = ['#a524ff', '#ff4f76'];
Highcharts.getOptions().colors = Highcharts.map(scancolors, function (scancolors) {
    return {
        radialGradient: { cx: 0, cy: -0.8, r: 3 },
        stops: [[0, scancolors], [1, Highcharts.Color(scancolors).brighten(1).get('rgb')]]
    };
}); 
var scanchars_option = {
    chart: {
        type: 'column',
        renderTo: 'scanchars'
    },
    title: {
        text:null
    },
    subtitle: {
        text: null
    },
    xAxis: {
        categories: [
            '第一周','第二周','第三周','第四周'
        ],
        crosshair: true
    },
    yAxis: {
        min: 0,
        title: {
            text: '次数 (次)'
        },
        gridLineDashStyle: 'longdash'
    },
    tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
        '<td style="padding:0"><b>{point.y} 次</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            borderWidth: 0
        }
    },
    series: [{
        name: '设备1',
        data: [49, 71, 106, 129],
        borderRadiusTopLeft: 100, 
        borderRadiusTopRight: 100,
    }, {
        name: '设备2',
        data: [83, 78, 98, 93],
        borderRadiusTopLeft: 100, 
        borderRadiusTopRight: 100,
    }]
}
var scanchars = new Highcharts.Chart(scanchars_option);

效果：