2014-11-07 2 views
0

시계열 데이터가있는 멀티 바 차트에 nvd3을 사용하려고합니다. 그러나 x 축에서 확인란의 항목에 대해 틱이 개별적으로 나타납니다. x 축에 날짜가있는 일반 멀티 바 차트로 나타나게하려면 어떻게 수정해야합니까? 제발 내 플 런커를 http://plnkr.co/edit/GX5PH5xI2JZfylobO8M4?p=preview에 찾아주세요. nvd3, 시계열 데이터가있는 다중 막대, 각 체크 상자 항목마다 x- 틱이 개별적으로 표시됨

다음

내 옵션 설정은 다음과 같습니다

$scope.options = { 
       chart : { 
          type : 'multiBarChart', 
          height : 400, 
          text : 'Credit Recovery', 
          x : function(d) { 
           return d[0]; 
          }, 
          y : function(d) { 
           return d[1]; 
          }, 
          useVoronoi : false, 
          clipEdge : true, 
          transitionDuration : 1000, 
          useInteractiveGuideline : true, 
          xScale : d3.time.scale(), // <-- explicitly set time scale 
          xAxis : { 
           ticks : d3.time.months, // <-- add formatter for the ticks 
           tickFormat : function(d) { 
       return d3.time.format('%m-%y')(new Date(d)) 
     }, 
           showMaxMin : false 
          }, 
          yAxis : { 
           tickFormat : function(d) { 
            return '$' + d3.format('.02f')(d) 
           } 
          } 
         } 

    }; 

답변

1

내가 당신의 데이터 객체가 잘못 생각, 내가 데이터 구조와 X를 해결 그의 plunker을 확인, y는 차트 개체의 속성. 주문 기능입니다.

plunker fixed

$scope.data = [ { 
      "values":[ 
      {x:1359072000000, y:10,label:'C1.1'}, 
      {x:1365116400000, y:30,label:'C1.2'}, 
      {x:1357516800000, y:40,label:'C1.3'}, 
      ], 
     "bar":true, 
     "key":"Carrier1" 

     }, 
     { 
      "values":[ 
      {x:1359072000000, y:30,label:'C2.1'}, 
      {x:1365116400000, y:10,label:'C2.2'}, 
      {x:1357516800000, y:79,label:'C2.3'}, 
      ], 
      "bar":true, 
      "key":"Carrier2" 

     } 
     ]; 
+0

감사합니다. 문제를 해결했으며 대답을 수락합니다. 포커스 차트에 맞춰 비슷한 문제를 해결할 수 있습니까? 내 게시물은 http://stackoverflow.com/questions/26251727/nvd3-chart-strange-behavior-with-date-range-slider/26638343?noredirect=1#comment41909680_26638343에 있습니다. –