Question

例如：

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

看起来像

如何在保持用户查看全名的能力的同时隐藏长标题（可能在悬停鼠标时）。或者更好的方式？

Answer 1

您可以使用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]);
            })
        ;
    }
});

http://jsfiddle.net/05hsk6yh/

C3 js：大轴标签

1 个答案: