더 좋은 방법으로 축의 값을 표시합니다.

Question

현재 차트에서 x 축 값을 읽을 수 없습니다. 어떻게 표현을 향상시킬 수 있습니까? 아니면 적어도 x 값의 간격은 일정한 간격을 유지해야합니다.

var chart = c3.generate({ 
    data: { 
    xs: { 
     data1: "data2", 
     data3: "data4" 
    }, 
    xSort: false, 
    columns: [ 
     ['data1', -4,3,4,7,8,9,8,7,3], 
     ['data2', -5,2,3,4,5,4,3,2,1], 
     ['data3', Math.random() * 10,Math.random() * 10,Math.random() * 10,Math.random() * 10,Math.random() * 10,Math.random() * 10], 
     ['data4', Math.random() * 10,Math.random() * 10,Math.random() * 10,Math.random() * 10,Math.random() * 10,Math.random() * 10] 
    ] 

    } 
}); 

https://jsfiddle.net/9zmbq0g0/

Answer 1

사용 axis.x.tick.values :

var chart = c3.generate({ 
 
    data: { 
 
    xs: { 
 
     data1: "data2", 
 
     data3: "data4" 
 
    }, 
 
    xSort: false, 
 
    columns: [ 
 
     ['data1', 2,3,4,7,8,9,8,7,3], 
 
     ['data2', 1,2,3,4,5,4,3,2,1], 
 
     ['data3', Math.random() * 10,Math.random() * 10,Math.random() * 10,Math.random() * 10,Math.random() * 10,Math.random() * 10], 
 
     ['data4', Math.random() * 10,Math.random() * 10,Math.random() * 10,Math.random() * 10,Math.random() * 10,Math.random() * 10] 
 
    ] 
 
    }, 
 
    axis: { 
 
    x: { 
 
     tick: { 
 
     values: d3.range(-5,10) 
 
     } 
 
    } 
 
    } 
 
});

#catImage { 
 
    width: 40px; 
 
    height: 40px; 
 
    position: absolute; 
 
    left: 40px; 
 
    top: 0px; 
 
}

<link data-require="c3.js@0.4.11" data-semver="0.4.11" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.css" /> 
 
<script data-require="c3.js@0.4.11" data-semver="0.4.11" src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.js"></script> 
 
<script data-require="d3@3.5.17" data-semver="3.5.17" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script> 
 
<div id="chart"></div>