旋转轴后，刻度和图例重叠，高度在 c3js 中不起作用

Question

为了我的业务目的，图表应该旋转。有一个属性axis.rotated，我做到了true。它旋转得很漂亮，但现在 y-axis 值和 legends 重叠。

我尝试 axis.y.height 到 100 或更多，但它不起作用。

代码：

var chart = c3.generate({
bindto: '#my-chart',
data: {
    columns: [
        ['data1', 3000, 20000, 10000, 40000, 15000, 25000],
        ['data2', 130, 100, 140, 200, 150, 50]
    ],
    type: 'bar'
},
axis: {
         rotated: true,
         x: {
              type: "categorized",
              categories:['abc','abcabc','abcabcabc','abcabcabc','abcabcabcabcabc','abcd'],
              tick: {
                        rotate: -60,
                        multiline: false
                  },
                  height:100
              },
         y: {
              tick: {
                   rotate : -60
               },
               height:50
           }
    }
});

但是如果我输入 axis.y.tick.rotate:60，它就可以正常工作。

Answer 1

这是一个已知错误，正在修复中 --> https://github.com/c3js/c3/pull/1766/

不过，在将其添加到 c3 master 之前，您可以在构建图表之前将提交者的代码添加为独立的修复程序，如下所示（基本上他在 Math.abs 中包含了一些计算）：

c3.chart.internal.fn.getHorizontalAxisHeight = function (axisId) {
    var $$ = this, config = $$.config, h = 30;
    if (axisId === 'x' && !config.axis_x_show) { return 8; }
    if (axisId === 'x' && config.axis_x_height) { return config.axis_x_height; }
    if (axisId === 'y' && !config.axis_y_show) { 
        return config.legend_show && !$$.isLegendRight && !$$.isLegendInset ? 10 : 1; 
    }
    if (axisId === 'y2' && !config.axis_y2_show) { return $$.rotated_padding_top; }
    // Calculate x axis height when tick rotated
    if (axisId === 'x' && !config.axis_rotated && config.axis_x_tick_rotate) {
        h = 30 + $$.axis.getMaxTickWidth(axisId) * Math.cos(Math.PI * (90 - Math.abs(config.axis_x_tick_rotate)) / 180);
    }
    // Calculate y axis height when tick rotated
    if (axisId === 'y' && config.axis_rotated && config.axis_y_tick_rotate) {
        h = 30 + $$.axis.getMaxTickWidth(axisId) * Math.cos(Math.PI * (90 - Math.abs(config.axis_y_tick_rotate)) / 180);
    }
    return h + ($$.axis.getLabelPositionById(axisId).isInner ? 0 : 10) + (axisId === 'y2' ? -10 : 0);
};

查看 https://jsfiddle.net/x9r4zk0j/8/ 的新 fiddle 以了解有效的修复

如果这对您有帮助，请给编写初始修复程序的人点个赞github

旋转轴后，刻度和图例重叠，高度在 c3js 中不起作用

After rotating axis, ticks and legend overlaps and height doesn't work in c3js

legend

c3.js