C3 js：大轴标签 [英] C3 js : large axis label

问题描述

例如：

  var chart = c3.generate（{
 data：{
x：的 'x'，
列：[
 [ 'X'， 'www.site1.com11111111111111111111111111111111111111111111111111111'， 'www.site2.com11111111111111111111111111111111111111111111111111111111'， 'www.site3.com11111111111111111111111111111111111111111111111111111111111111'，www.site4.com11111111111111111111111111111111111111111111111111111111111111111111111111 ']，
 ['download'，30,200,100,400]，
 ['loading'，90,100,140,​​200]，
]，
组：[
 ['download'，'loading'] 
]，
类型：'bar'
}，
轴：{
x：{
类型：'category'，//这需要加载字符串x值
 tick：{
 rotate：25 
} 
} 
} 
}）
  

;

，看起来像 < img src =https://i.stack.imgur.com/Fcicc.pngalt =在这里输入图片描述>

如何能我隐藏了长标题，同时保持用户查看全名的能力（也许当鼠标悬停时）。或者更好的方法？

解决方案

您可以使用tick.format配置更改文本，但实际获得文本的值因为这些类别值是PITA的一部分，请参阅下面的解决方案：

tick.format函数缩短轴标签文本（并将其结转到条形图工具提示）

.onrendered函数将标题元素添加到轴标签，将鼠标悬停时显示全轴标签作为基本工具提示

  var chart = c3.generate（{
 data：{
x：'x'，
列：[ 
 [ 'X'， 'www.site1.com11111111111111111111111111111111111111111111111111111'， 'www.site2.com11111111111111111111111111111111111111111111111111111111'， 'www.site3.com11111111111111111111111111111111111111111111111111111111111111'，www.site4.com111111111111111111111111111111111111111111111111111111111111 
 ['download'，30,200,100,400]，
 ['loading'，90,100,140,​​200]，
]，
 groups：[
 ['download'，'loading'] 
]，
类型：'bar'
}，
轴：{
x：{ 
类型：'category'，//这需要加载字符串x值
 tick：{
 rotate：25，
 
 format：function（d）{
 var catName = this.api.categories（）[d]; 
 if（catName.length> 20）{
 catName = catName.slice（0,20）+...; 
} 
返回catName; 
} 
 $ b $，
} 
}，
渲染：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/05hsk6yh/

For example:

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
            }
        }
    }
})

;

and it looks like

How can I hide the long title while keeping the ability for the user to see the full name (maybe when hovering the mouse). Or maybe better way?

解决方案

You can change the text with the tick.format configuration, but actually getting the value of the text because these are category values is a bit of a PITA, see the solution below:

the tick.format function shortens the axes label text (and this is carried over into the bar chart tooltip too)

the .onrendered function adds title elements to the axes labels that show the full axes label as a basic tooltip when you mouseover them

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/05hsk6yh/

这篇关于C3 js：大轴标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！