如何在Angular-js的柱形圖上旋轉x軸標籤？

我已經創建了一個使用Angular-nvd3.js的柱形圖。我遇到的問題是該圖表的數據標籤。我想要垂直旋轉這些標籤。這是圖表的示例代碼和可編輯鏈接。如何在Angular-js的柱形圖上旋轉x軸標籤？

angular.module('mainApp.controllers') 

    .controller('discreteBarChartCtrl', function($scope){ 

     $scope.options = { 
      chart: { 
       type: 'discreteBarChart', 
       height: 450, 
       margin : { 
        top: 20, 
        right: 20, 
        bottom: 50, 
        left: 55 
       }, 
       x: function(d){return d.label;}, 
       y: function(d){return d.value;}, 
       showValues: true, 
       valueFormat: function(d){ 
        return d3.format(',.4f')(d); 
       }, 
       duration: 500, 
       xAxis: { 
        axisLabel: 'X Axis' 
       }, 
       yAxis: { 
        axisLabel: 'Y Axis', 
        axisLabelDistance: -10 
       } 
      } 
     }; 

     $scope.data = [ 
      { 
       key: "Cumulative Return", 
       values: [ 
        { 
         "label" : "A" , 
         "value" : -29.765957771107 
        } , 
        { 
         "label" : "B" , 
         "value" : 0 
        } , 
        { 
         "label" : "C" , 
         "value" : 32.807804682612 
        } , 
        { 
         "label" : "D" , 
         "value" : 196.45946739256 
        } , 
        { 
         "label" : "E" , 
         "value" : 0.19434030906893 
        } , 
        { 
         "label" : "F" , 
         "value" : -98.079782601442 
        } , 
        { 
         "label" : "G" , 
         "value" : -13.925743130903 
        } , 
        { 
         "label" : "H" , 
         "value" : -5.1387322875705 
        } 
       ] 
      } 
     ] 
})

http://plnkr.co/edit/6t5bky?p=preview

我想要的標籤是相同的畫面如下圖

來源

2016-08-10 Tharindu Senanayake

可以使用rotateLabels屬性和設置的程度，

代碼：

xAxis: { 
    axisLabel: 'X Axis', 
    rotateLabels: 90 
}

這裏是工作Plunker

來源

2016-08-10 15:19:22 Sajeetharan

謝謝你這麼多，你讓我很快樂 –

@TharinduSenanayake你檢查你的前一個問題的答案？ – Sajeetharan

是的，我做到了。感謝你也:) –

如何在Angular-js的柱形圖上旋轉x軸標籤？

回答

相關問題