设置渐变色/圆角
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);
效果: