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

问题描述

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

以下是图表代码：

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

一个人可以检查c3.js docs上的代码执行情况

谢谢。

解决方法

尝试多行选项

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

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

,

这是一个完美的答案。如果超出上限20，则会截断列名，并进一步为该列添加工具提示。

var chart = c3.generate({
    data: {
        columns: [
            ['data1',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;
                }
            },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]);
            })
        ;
    }
});