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

【问题标题】：tooltip on category axis in c3.js chart?c3.js图表中类别轴上的工具提示？
【发布时间】：2020-12-03 01:34:23
【问题描述】：

我有一个旋转的条形图，我想在 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
        }
    }
});

可以在c3.js docs上查看代码执行情况

提前致谢。

【问题讨论】：

标签： javascript typescript d3.js charts c3.js

【解决方案1】：

尝试多行选项

https://c3js.org/reference.html#axis-x-tick-multilineMax

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

【讨论】：

Multiline 在默认情况下始终设置为“true”。而且它不能满足所有要求。我已经在下面发布了答案或 [stackoverflow.com/a/63450416/8350914]
是的，但是 multilinemax 值默认设置为 2，这就是导致文本换行的原因。将其设置为 1，你会得到截断而不是换行。

【解决方案2】：

这是完美的答案。如果超过 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]);
            })
        ;
    }
});

【讨论】：