c3 막대 그래프 진드 값을 중심에 맞지 않는 눈금으로 맞 춥니 다

Question

x 범주 축의 값을 가운데가 아닌 막대의 측면에 놓으려고합니다. 분명히 거기에 진드기를 넣는 것은 가능하지만 진드기 아래에 값을 넣을 수 있습니까?

var chart; 
 
chart = c3.generate({ 
 
    data: { 
 
     columns: [ 
 
      ['data', 30, 200, 100, 400, 150, 250] 
 
     ], 
 
     type: 'bar' 
 
    }, 
 
    bar: { 
 
     width: { 
 
      ratio: 0.98 
 
     } 
 
    }, 
 
    axis: { 
 
     x: { 
 
     type: 'category', 
 
     categories: [10, 50, 100, 500, 2000, 5000], 
 
     tick: { 
 
      centered: false 
 
     } 
 
     } 
 
    }, 
 
    legend: { 
 
     show: false 
 
    } 
 
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script> 
 
<div id="chart" class="c3" style="max-height: 280px; position: relative;"></div>

Answer 1

그것은 예쁜 대답하지, 그리고 마지막 라벨 (당신이 C3의 패딩 옵션을 조사해야합니다) 오프 다진 도착하지만, 이후이 두 줄이 할 차트를 렌더링 한 트릭 :

// use c3's internal x scale to get the width of one bar 
    var width = chart.internal.x(1) - chart.internal.x(0); 
    // shuffle all the tick label tspans along by half a bar's width 
    d3.select(".c3-axis").selectAll(".tick text tspan").attr("dx", width/2); 

var chart; 
 
chart = c3.generate({ 
 
    data: { 
 
     columns: [ 
 
      ['data', 30, 200, 100, 400, 150, 250] 
 
     ], 
 
     type: 'bar' 
 
    }, 
 
    bar: { 
 
     width: { 
 
      ratio: 0.98 
 
     } 
 
    }, 
 
    axis: { 
 
     x: { 
 
     type: 'category', 
 
     categories: [10, 50, 100, 500, 2000, 5000], 
 
     tick: { 
 
      centered: false 
 
     } 
 
     } 
 
    }, 
 
    legend: { 
 
     show: false 
 
    } 
 
    }); 
 

 
    var width = chart.internal.x(1) - chart.internal.x(0); 
 
    d3.select(".c3-axis").selectAll(".tick text tspan").attr("dx", width/2);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script> 
 
<div id="chart" class="c3" style="max-height: 280px; position: relative;"></div>