nvd3 discreteBarChart y 축 레이블

다음 코드를 사용하여 nvd3에서 개별 막대 차트의 y 축 레이블을 설정하지만 y 축 레이블은 표시하지 않습니다. BTW, x 축 레이블을 잘 작동합니다.nvd3 discreteBarChart y 축 레이블

chart.yAxis.axisLabel('Students (in %)');

출처

2013-06-25 Ramesh

다음 작품 : 당신은 어딘가에 오타가있을 수 있습니다

nv.addGraph(function() { 
    var chart = nv.models.discreteBarChart() 
     .x(function(d) { return d.label }) 
     .y(function(d) { return d.value }) 
     .staggerLabels(true) 
     .tooltips(false) 
     .showValues(true) 

    chart.yAxis.axisLabel("Students (in %)") 

    d3.select('#chart svg') 
     .datum(data) 
     .transition().duration(500) 
     .call(chart); 

    nv.utils.windowResize(chart.update); 

    return chart; 
});

출처

2013-06-25 05:12:51

x 축 않습니다 –

주의 할 점은 왼쪽에 chart.margin 값이 너무 작 으면 레이블을 표시 할 공간이 충분하지 않습니다. 당신은 chart.margin 값을 조정하거나 axisLabelDistance 옵션을 조정하여 가까운 차트의 y 축 레이블을 이동할 수 있습니다 : 아래 그림과 같이

이산 막대 차트의 경우

chart.yAxis 
    .axisLabel('Students (in %)') 
    .axisLabelDistance(40);

출처

2013-11-25 17:14:14 cschroed

는 x 축과이 할 수있는 방법이 있나요 반면 검사에 표시되지 않습니다 축 라벨? 'chart.margin'과'axisLabelDistance'는 최소한'multiBarChart()'에서 나에게 도움이되지 않습니다. 감사합니다 –

체크 아웃 [이 답변] (http://stackoverflow.com/a/13472375/2622934). 텍스트 방향을'rotate' 값으로, 텍스트 위치를'translate' 값으로 조정할 수 있습니다. – cschroed

, 당신은 당신의 차트 옵션을 사용자 정의 할 수 있습니다. 자바 스크립트 코드에서 차트 모델을 만들 때이 옵션을 모두 사용할 필요는 없습니다. 변경 한 기능 만 설정하면 충분하며 다른 기능은 기본으로 설정됩니다. 나를 위해

'use strict'; 
 

 
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 
 
        } 
 
       ] 
 
      } 
 
     ] 
 
    })

출처

2018-01-03 09:38:34

nvd3 discreteBarChart y 축 레이블

답변

관련 문제