После поворота оси, тики и перекрытия легенд и высота не работают в c3js

Question

Для моей коммерческой цели график должен быть повернут. Существует свойство axis.rotated, и я сделал это true. Он красиво повернулся, но теперь значения y-axis и legends перекрываются.

src in jsfiddle of my problem

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, хотя, вы можете добавить код податель как отдельное исправление, как показано ниже, прежде чем построить ваши графики (в основном он оборачивает несколько расчетов в 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