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: {

在Angular4项目中,我使用angular2 highcharts库创建堆叠条形图。以下对象是我到目前为止的配置

{
  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增加了它的高度,但并没有舍入。