以更令人愉快的方式呈现轴的值

在我当前的图表中，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/

来源

2017-09-20 yavg

使用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="[email protected]" data-semver="0.4.11" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.css" /> 
 
<script data-require="[email protected]" data-semver="0.4.11" src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.js"></script> 
 
<script data-require="[email protected]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>

来源

2017-09-20 18:21:08 Mark

以更令人愉快的方式呈现轴的值

回答

相关问题