这就是我希望它看起来像x轴以下的负值和包裹在圆括号中的负值的样子。
C3.js代码
var chart = c3.generate({
bindto : "#totalDollarFlow",
size : {
height : 400,
width : 700
},
title : {
text : data.title
},
data : {
x : labels,
columns : data.columns,
axes : {
data1 : 'y',
},
type : 'bar',
types : {
data1 : 'line',
},
names : {
},
colors : {
data1 : '#2ca02c',
},
selection : {
enabled : true,
draggable : false,
multiple : true,
grouped : true
}
},
subchart : {
show : false
},
point : {
show : false
},
zoom : {
enabled : true,
rescale : true
},
grid : {
y : {
show : true
}
},
regions : [ {
axis : 'y',
start : 186,
end : 187,
class : 'regionY'
} ],
axis : {
x : {
type : 'category',
tick : {
rotate : 90,
centered : true,
fit : true,
multiline : false,
culling : {
max : 60
}
},
},
y : {
label : {
text : '$s Millions',
position : 'outer-middle'
},
tick : {
format : d3.format("$,")
}
},
}
});
目前的图表外观。
最佳答案
我不确定您想要的一切是否可行,但至少您可以接近。对于y轴,您可以使用以下格式:
y : {
label : {
text : '$s Millions',
position : 'outer-middle'
},
tick : {
format: function (d) {
const realNumber = d*1000000;
return realNumber.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
}
}
}
要在0处获得一条线,您可以在位置0处为y轴定义一条网格线。您还可以在此处设置文本,但是只能使用一条文本来描述该行的用途,而不是您的刻度。我认为这比在图表中浮动时间戳更好。
grid : {
y : {
show : true,
lines: [
{value: 0},
]
}
}
这条线可能有点细,但是当您更改其CSS时,可以使其更粗。我认为是
c3-ygrid-line
。要获取更多信息,您可以随时使用the reference