私はc3.jsのコード用に開発しましたが、x軸のティックフォーマットは多くの年と月が表示されています,特定の年と月を表示することはできません.c3.jsでd3.jsライブラリを使用する方法.私が開発した特定のコード。
setTimeout(function () {
chart = c3.generate({
size:{height:500,width:600},
padding:{left:100},
data: {
json: [{"key":[2000,0],"value":500},{"key":[2000,1],"value":600},{"key":[2000,2],"value":200},{"key":[2000,3],"value":100},{"key":[2000,4],"value":700},{"key":[2000,5],"value":200},{"key":[2000,6],"value":1940},{"key":[2000,7],"value":1562},{"key":[2000,8],"value":2163},{"key":[2000,9],"value":2148},{"key":[2000,10],"value":2228},{"key":[2000,11],"value":4081},{"key":[2001,0],"value":600},{"key":[2001,1],"value":1000},{"key":[2001,2],"value":5385},{"key":[2001,3],"value":9647},{"key":[2001,4],"value":6209},{"key":[2001,5],"value":6661},{"key":[2001,6],"value":26472},{"key":[2001,7],"value":11965},{"key":[2001,8],"value":13179},{"key":[2001,9],"value":14389},{"key":[2001,10],"value":63365},{"key":[2001,11],"value":17158},{"key":[2001,0],"value":10000}],
names: {
value: 'transactions',
},
keys: {
x: 'key',
value: ['value'],
}
},
axis: {
x: {
type: 'category'
},
tick: {
format: function (x) { return x.getFullYear(); }
}
},
zoom: {
enabled: true
},
grid: {
x: {
show: true
},
y: {
show: true
}
},
regions: [
{axis: 'x', end: 1, class: 'regionX'},
{axis: 'x', start: 2, end: 4, class: 'regionX'},
{axis: 'x', start: 5, class: 'regionX'},
{axis: 'y', end: 50, class: 'regionY'},
{axis: 'y', start: 80, end: 140, class: 'regionY'},
{axis: 'y', start: 400, class: 'regionY'},
{axis: 'y2', end: 900, class: 'regionY2'},
{axis: 'y2', start: 1150, end: 1250, class: 'regionY2'},
{axis: 'y2', start: 1300, class: 'regionY2'},
]
});
chart.transform('area', 'value');
chart.transform('area-spline');
}, 2000);