Javascript c3.js图表中类别轴上的工具提示？

我有一个旋转的条形图，我想在x轴上显示类别。但大型文本正聚集在轴心。我想截断文本并显示工具提示

以下是图表代码：

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250, 50, 100, 250, 300]
        ],
        type: 'bar'
    },
    axis: {rotated: true,
        x: {
            type: 'category',
            categories: ['cat1aaaaaaaaaaaaaaaaaaaa', 'cacat1aaaaaaaaaaaaaaaaaaaat2', 'catcat1aaaaaaaaaaaaaaaaaaaa3', 'cat1aaaaaaaaaaassssssssssssssssssssssssssaaaaaaaaa', 'cat1aaaaaaaaaaaaaaaaaaaa', 'cat1aaaaaaaaaaaaaaaaaaaa', 'cat7', 'cat8', 'cat9', 'asas']
        },
        y: {
            show: false
        }
    }
});

您可以检查上的代码执行情况

---

提前感谢。

尝试多行选项

---

这是一个完美的答案。如果超过20的限制，这将截断列名，并进一步添加列的工具提示

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250, 50, 100, 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;
                }
            },
            type: 'category',
            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]);
            })
        ;
    }
});

---

默认情况下，多行始终设置为“true”。它并不能满足所有的要求。我已经在下面发布了答案，或者[是的，但是MultileMax值默认设置为2，这就是导致文本换行的原因。将其设置为1，则得到的是截断，而不是换行。

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250, 50, 100, 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;
                }
            },
            type: 'category',
            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]);
            })
        ;
    }
});