如何使倒線圖上在c3.js

Question

x軸，我能夠與c3.js

這是我c3.js代碼來實現這一點。

  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

您可以使用CSS變換，miror含酒吧的組和變換出身發揮，以保持它在的地方在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>

另一個棘手方式是反轉['值'，-160，-310，-232，-405，-200]的值，那麼你必須找到一些東西去除傳說中的「 - 」