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

这是一个已知的错误，其中包含一个修复程序 - ＆gt; 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/处查看有效修复的新小提琴

如果这对你有帮助，那就给那个在github上写下初始修复的人竖起大拇指

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

1 个答案: