如何解决c3.js图表中类别轴上的工具提示?
我有一个旋转的条形图,我想在其中显示x轴上的类别。但是大文本正集中在轴上。我想截断文本并显示工具提示。
以下是图表代码:
var chart = c3.generate({
data: {
columns: [
['data1',30,200,100,400,150,250,50,300]
],type: 'bar'
},axis: {rotated: true,x: {
type: 'category',categories: ['cat1aaaaaaaaaaaaaaaaaaaa','cacat1aaaaaaaaaaaaaaaaaaaat2','catcat1aaaaaaaaaaaaaaaaaaaa3','cat1aaaaaaaaaaassssssssssssssssssssssssssaaaaaaaaa','cat1aaaaaaaaaaaaaaaaaaaa','cat7','cat8','cat9','asas']
},y: {
show: false
}
}
});
一个人可以检查c3.js docs上的代码执行情况
谢谢。
解决方法
尝试多行选项
https://c3js.org/reference.html#axis-x-tick-multilineMax
var chart = c3.generate({
data: {
columns: [
['data1',30,200,100,400,150,250,50,300]
],type: 'bar'
},axis: {rotated: true,x: {
tick: {
multiline: true,multilineMax: 1,},type: 'category',categories: ['cat1aaaaaaaaaaaaaaaaaaaa','cacat1aaaaaaaaaaaaaaaaaaaat2','catcat1aaaaaaaaaaaaaaaaaaaa3','cat1aaaaaaaaaaassssssssssssssssssssssssssaaaaaaaaa','cat1aaaaaaaaaaaaaaaaaaaa','cat7','cat8','cat9','asas']
},y: {
show: false
}
}
});
,
这是一个完美的答案。如果超出上限20,则会截断列名,并进一步为该列添加工具提示。
var chart = c3.generate({
data: {
columns: [
['data1',250]
],type: 'bar',axis: {
rotated: true,x: {
tick: {
multiline: false,format: function (d) {
var catName = this.api.categories()[d];
if (catName.length > 20) {
catName = catName.slice(0,20)+"…";
}
return catName;
}
},categories: ['Travel and Hospitalityaaaaaaaaaaaaaaaaaa','Life Science and Pharma','Saas and Cloud','Hi-tech Manufacturing','Software','Business Services','Govt/Public Sector','Energy','Manufacturing','Healthcare','Media','Internet','Retail','Biotech','Automobile','Consumer Goods','Financial Services']
}
},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]);
})
;
}
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。