C3 JS:大轴标签
问题描述:
例如:C3 JS:大轴标签
var chart = c3.generate({
data: {
x : 'x',
columns: [
['x', 'www.site1.com11111111111111111111111111111111111111111111111111111', 'www.site2.com11111111111111111111111111111111111111111111111111111111', 'www.site3.com11111111111111111111111111111111111111111111111111111111111111', 'www.site4.com11111111111111111111111111111111111111111111111111111111111111111111111111'],
['download', 30, 200, 100, 400],
['loading', 90, 100, 140, 200],
],
groups: [
['download', 'loading']
],
type: 'bar'
},
axis: {
x: {
type: 'category', // this needed to load string x value
tick: {
rotate: 25
}
}
}
})
;
我怎么能隐藏长标题,同时保持对用户看到的全名的能力(也许悬停鼠标时)。或者也许更好的办法?
答
您可以更改与tick.format配置的文本,但实际上获得的文本价值,因为这些类别值是有点PITA,请参阅下面的解决方案:
的tick.format功能缩短轴标签文本(这被结转到柱状图提示过)
的.onrendered功能增加了,当你将鼠标放置到他们
标题元素轴标签,展示了全轴标签作为基本工具提示var chart = c3.generate({
data: {
x : 'x',
columns: [
['x', 'www.site1.com11111111111111111111111111111111111111111111111111111', 'www.site2.com11111111111111111111111111111111111111111111111111111111', 'www.site3.com11111111111111111111111111111111111111111111111111111111111111', 'www.site4.com11111111111111111111111111111111111111111111111111111111111111111111111111'],
['download', 30, 200, 100, 400],
['loading', 90, 100, 140, 200],
],
groups: [
['download', 'loading']
],
type: 'bar'
},
axis: {
x: {
type: 'category', // this needed to load string x value
tick: {
rotate: 25,
format: function (d) {
var catName = this.api.categories()[d];
if (catName.length > 20) {
catName = catName.slice(0,20)+"…";
}
return catName;
}
},
}
},
onrendered: function() {
var self = this;
d3.select(this.config.bindto)
.selectAll(".c3-axis-x .tick text")
.each(function (d) {
var title = d3.select(this).select("title");
if (title.empty()) {
title = d3.select(this).append("title");
}
title.text (self.api.categories()[d]);
})
;
}
});
您需要对onmouseover事件做些什么。 http://c3js.org/reference.html#data-onmouseover如果你添加一个jsfiddle,它会更容易帮助。 – Razzildinho