는 어떻게 c3.js</p> <p><a href="https://i.stack.imgur.com/Qem8r.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Qem8r.jpg" alt="enter image description here"></a></p> <p>이 내 c3.js 코드와이를 달성 할 수 있었다 c3.js

Question

에서 x 축에 반전 막대 차트를 확인합니다.

  var chart = c3 
     .generate({ 
      bindto : "#topUses", 
      size : { 
       height : 180, 
       width : 400 
      }, 
      bar : { 
       width : 14 
      }, 
      padding : { 
       left : 100, 
       top : 50 
      }, 
      color : { 
       pattern : [ '#ff1919', '#ff1919', '#ff1919', '#ff1919', 
         '#ff1919' ] 
      }, 
      data : { 
       x : 'x', 
       columns : [ 
         [ 'x', 'Google', 'Yahoo', 'Facebook', 
           'Capital One', 'Express' ], 
         [ 'value', 160, 310, 232, 405, 200 ] ], 

       type : 'bar', 

       color : function(inColor, data) { 
        var colors = [ '#ff1919', '#ff1919', '#ff1919', 
          '#ff1919', '#ff1919' ]; 
        if (data.index !== undefined) { 
         return colors[data.index]; 
        } 

        return inColor; 
       } 
      }, 
      axis : { 
       rotated : true, 
       x : { 
        type : 'category', 
        show : false, 
       }, 
       y : { 
        show : false 
       } 
      }, 
      tooltip : { 
       grouped : false 
      }, 
      legend : { 
       show : false 
      } 
     }); 

나는이 아이디어를 얻고 싶습니까?

Answer 1

당신은 막대가 포함 된 그룹을는 miror 변환을 CSS를 사용하고 SVG에서 장소에 보관하는 변환 - 원점 재생할 수 있습니다 :

 var chart = c3 
 
     .generate({ 
 
      bindto : "#topUses", 
 
      size : { 
 
       height : 180, 
 
       width : 400 
 
      }, 
 
      bar : { 
 
       width : 14 
 
      }, 
 
      padding : { 
 
       left : 100, 
 
       top : 50 
 
      }, 
 
      color : { 
 
       pattern : [ '#ff1919', '#ff1919', '#ff1919', '#ff1919', 
 
         '#ff1919' ] 
 
      }, 
 
      data : { 
 
       x : 'x', 
 
       columns : [ 
 
         [ 'x', 'Google', 'Yahoo', 'Facebook', 
 
           'Capital One', 'Express' ], 
 
         [ 'value', 160, 310, 232, 405, 200 ] ], 
 

 
       type : 'bar', 
 

 
       color : function(inColor, data) { 
 
        var colors = [ '#ff1919', '#ff1919', '#ff1919', 
 
          '#ff1919', '#ff1919' ]; 
 
        if (data.index !== undefined) { 
 
         return colors[data.index]; 
 
        } 
 

 
        return inColor; 
 
       } 
 
      }, 
 
      axis : { 
 
       rotated : true, 
 
       x : { 
 
        type : 'category', 
 
        show : false, 
 
       }, 
 
       y : { 
 
        show : false 
 
       } 
 
      }, 
 
      tooltip : { 
 
       grouped : false 
 
      }, 
 
      legend : { 
 
       show : false 
 
      } 
 
     });

.c3-chart{ 
 
transform-origin: 120px 0px; 
 
transform:scale(-1,1); 
 
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/c3/0.4.9/c3.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script> 
 
<div id="topUses"></div>

다른 까다로운을 방법은 값 [-100, -310, -232, -405, -200]을 반전하는 것입니다. 그러면 전설에서 "-"을 제거해야 할 항목을 찾아야합니다.