如何使用C3.js实现X轴标签以右侧为固定点旋转

我明白你的需求了——默认情况下C3.js的X轴tick旋转是从文本的开头字符作为锚点，你想改成以字符串的末尾（比如'AE009948'的最后一个字符'8'）为固定点旋转对吧？

可惜C3的官方配置里确实没有直接提供这个选项，但好在C3是基于D3构建的，我们可以借助D3的API手动调整tick的渲染逻辑，具体实现如下：

修改后的完整代码 #

var chart = c3.generate({
    bindto: '#chart',
    data: {
        x : 'x',
        columns: [
            ['x', 'AE009948','AL732656','CP000114'],
            ['Core', 30, 200, 250],
            ['Shared', 10, 100, 100],
            ['Exclusive', 70, 10, 100] // 补上原代码遗漏的逗号
        ],
        type: 'bar',
    },
    title: {
        text: 'random'
    },
    axis:{
        x:{
            type:'category',
            tick: {
                rotate: 30,
                multiline: false
            },
            height:100
        }
    },
    bar: {
        width: {
            ratio: 0.5 // 让柱状宽度占刻度间距的50%
        }
    },
    onrendered: function() {
        // 选中X轴所有的刻度文本元素
        const xTicks = d3.select('#chart').selectAll('.c3-axis-x .tick text');
        
        xTicks.each(function() {
            const textElement = d3.select(this);
            // 将文本锚点设置为末尾，让旋转以文本结尾为基准
            textElement.attr('text-anchor', 'end');
            
            // 获取文本的实际宽度，用于调整位置
            const bbox = this.getBBox();
            const textWidth = bbox.width;
            
            // 修改transform属性，把文本向左偏移自身宽度，抵消锚点变化带来的位置偏移
            const originalTransform = textElement.attr('transform');
            const newTransform = originalTransform.replace(
                /translate\(([^,]+),([^)]+)\)/,
                (match, x, y) => `translate(${parseFloat(x) - textWidth}, ${y})`
            );
            
            textElement.attr('transform', newTransform);
        });
    }
});

核心逻辑说明 #

1. onrendered回调：这个函数会在图表每次渲染完成后触发，确保我们能获取到已经生成的刻度元素，避免操作未渲染的DOM节点。
2. 调整文本锚点：把text-anchor设为end，直接改变文本的对齐基准，让旋转以字符串末尾为固定点。
3. 修正位置偏移：锚点改为末尾后，文本会自动向右偏移自身宽度，所以我们通过修改transform里的translate值，把文本向左移动对应宽度，保证标签位置和原需求一致。

另外我顺便修正了你原代码里的一个小语法错误：['Exclusive', 70, 10 100]漏掉了逗号，现在已经补上，避免运行时报错。

内容的提问来源于stack exchange，提问作者Nicolas Aoki