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>