Javascript 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事件做些什么。如果您添加一个jsfiddle，它将更容易提供帮助。