2017-07-26 28 views
0

在Angular 4項目中,我使用angular2-highcharts庫來創建堆積條形圖。以下對象是迄今爲止的配置。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' 
    }] 
} 

並且這產生這樣的視覺效果 - >enter image description here

我需要變換成此 - >enter image description here

正如在所期望的結果的圖表具有更高度以及其邊緣是見回合。我不知道該怎麼做。

+0

我設法通過CSS來增加它的高度,但不是四捨五入。 –

回答