C3 js :大轴标签
C3 js :大轴标签
提问于 2017-08-10 16:41:38
例如：
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
}
}
}
})；
看起来像是
如何隐藏长标题，同时保留用户看到全名的能力(可能是在鼠标悬停时)。或者是更好的方式？
回答 1
Stack Overflow用户
发布于 2017-08-14 18:22:09
您可以使用tick.format配置更改文本，但实际上获取文本的值有点麻烦，因为这些是类别值，请参阅下面的解决方案：
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]);
})
;
}
});http://jsfiddle.net/ajh0q2e7/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45608611
复制相关文章
相似问题
腾讯云开发者
