Highcharts条形图配置可增加高度和圆边
在Angular4项目中,我使用angular2 highcharts库创建堆叠条形图。以下对象是我到目前为止的配置Highcharts条形图配置可增加高度和圆边,highcharts,angular2-highcharts,Highcharts,Angular2 Highcharts,在Angular4项目中,我使用angular2 highcharts库创建堆叠条形图。以下对象是我到目前为止的配置 { title: { text: '' }, xAxis: { categories: [''], crosshair: true, visible: false }, yAxis: { min: 0, max: 100, title: { text: '' }, labels: {
{
title: { text: '' },
xAxis: {
categories: [''],
crosshair: true,
visible: false
},
yAxis: {
min: 0,
max: 100,
title: {
text: ''
},
labels: {
enabled: true
},
visible: false
},
chart: {
type: 'bar',
backgroundColor: 'rgba(255, 255, 255, 0.1)'
},
legend: {
enabled: false
},
plotOptions: {
column: {
pointPadding: 0,
borderWidth: 0,
stacking: 'normal',
dataLabels: {
enabled: true,
formatter: function() {
return this.point.y + '%';
},
inside: true
},
enableMouseTracking: false,
},
series: {
stacking: 'normal',
dataLabels: {
enabled: true,
formatter: function () {
if (this.point.y) {
return this.point.y + '%';
}
return '';
},
style: { fontSize: '10px' },
padding: 10
},
borderWidth: 0
}
},
series: [{
name: 'Pending',
data: ...,
color: '#ff4233'
}, {
name: 'Executed',
data: ...,
color: '#34d788'
}, {
name: 'Cancelled',
data: ...,
color: '#8f8c87'
}]
}
这会产生这种视觉效果->
我需要将此转换为->
正如您在期望的结果中看到的,图表具有更高的高度,并且其边缘是圆形的。我不知道怎么做。你试过使用圆角插件吗?使用它,您可以使用以下属性:
borderRadiusTopLeft
,borderRadiusTopRight
,borderradiustbottomright
和borderradiustbottomleft
插件参考:示例:
我设法通过css增加了它的高度,但并没有舍入。