如何按降序對x軸排序

Question

是否可以按降序排列x軸？自然c3排序x軸順序。我的圖如下所示。

jQuery(function($) { 
 
    var chart = c3.generate({ 
 
    bindto: '#chart', 
 
    data: { 
 
     x: 'x', 
 
     columns: [ 
 
     ['x', 20, 19, 18, 17, 16, 15, 14, 13, 12, 11], 
 
     ['data1', 180, 232, 250, 289, 424, 473, 414, 428, 590, 600] 
 
     ], 
 
     axes: { 
 
     data1: 'y2' 
 
     }, 
 
     regions: { 
 
     'data1': [{start: 16, style: 'dashed'}] 
 
     } 
 
    }, 
 
    axis: { 
 
     y: { 
 
     show: false 
 
     }, 
 
     y2: { 
 
     show: true 
 
     } 
 
    } 
 
    }); 
 
});

<link href="http://cdnjs.cloudflare.com/ajax/libs/c3/0.3.0/c3.min.css" rel="stylesheet"/> 
 

 
<div id="chart"></div> 
 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/c3/0.3.0/c3.min.js"></script>

我希望圖形x軸是完全按照我的X系列一樣的降序排列。任何幫助將不勝感激。

Answer 1

是的我想出瞭如何實現這一目標。只需給出負x值，c3將按降序繪製x軸。然後格式化標籤，使其顯示正值。

jQuery(function($) { 
 
    var chart = c3.generate({ 
 
    bindto: '#chart', 
 
    data: { 
 
     x: 'x', 
 
     columns: [ 
 
     ['x', -20, -19, -18, -17, -16, -15, -14, -13, -12, -11], 
 
     ['data1', 180, 232, 250, 289, 424, 473, 414, 428, 590, 600] 
 
     ], 
 
     axes: { 
 
     data1: 'y2' 
 
     }, 
 
     regions: { 
 
     'data1': [{start: -16, style: 'dashed'}] 
 
     } 
 
    }, 
 
    axis: { 
 
     y: { 
 
     show: false 
 
     }, 
 
     y2: { 
 
     show: true 
 
     }, 
 
     x: { 
 
     tick: { 
 
      format: function (x) { 
 
      return -x; 
 
      } 
 
     } 
 
     } 
 
    } 
 
    }); 
 
});

<link href="http://cdnjs.cloudflare.com/ajax/libs/c3/0.3.0/c3.min.css" rel="stylesheet"/> 
 

 
<div id="chart"></div> 
 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/c3/0.3.0/c3.min.js"></script>