Можно ли загрузить новую метку оси y для c3.js?

Question

Я использую AJAX для хранения новых данных в таблице c3.js. Одна из вещей, которые я хочу изменить на ярлыке оси y. Возьмите это, например:

var chart = c3.generate({ 
    data: { 
     x : 'x', 
     columns: [ 
      ['x', 'www.site1.com', 'www.site2.com', 'www.site3.com', 'www.site4.com'], 
      ['download', 30, 200, 100, 400], 
      ['loading', 901, 100, 140, 200], 
     ], 
     groups: [ 
      ['download', 'loading'] 
     ], 
     type: 'bar' 
    }, 
    axis: { 
     x: { 
      type: 'category' // this needed to load string x value 
     }, 
     y: { 
      label: { 
       text: 'Y-Axis #1', 
       position: 'outer-middle' 
      } 
     } 
    } 
}); 

setTimeout(function() { 
    chart.load({ 
     columns: [ 
      ['x', 'www.siteA.com', 'www.siteB.com', 'www.siteC.com', 'www.siteD.com'], 
      ['download', 130, 200, 150, 350], 
      ['loading', 190, 180, 190, 140], 
     ], 
     axis: { 
      y: { 
       label: { 
        text: 'Change Y-Axis text to this', 
        position: 'outer-middle' 
       } 
      } 
     }    
    }); 
}, 1000); 

Всякий раз, когда это работает, только метку по оси Y. «Ось Y # 1» показывает вверх. Ось Y, которую я хочу загрузить, в этом случае 'Change Y-Axis text to this' не отображается. Даже если я прокомментирую это сообщение

y: { 
    label: { 
     text: 'Y-Axis #1', 
     position: 'outer-middle' 
    } 
} 

тогда не отображается метка оси y. Это заставляет меня думать, что либо новую метку оси Y нельзя загрузить, либо я делаю это неправильно.

Я попробовал другой подход и получил сам фактический элемент:

<text class="c3-axis-y-label" transform="rotate(-90)" x="-278" dx="0" dy="-38" style="text-anchor: middle;">Y-Axis #1</text>

Я попытался изменить его с JQuery

$(".c3-axis-y-label").text('lol'); 

Но без толку, это не сработало, потому что я думайте, что это работает только с промежутками.

Может ли кто-нибудь помочь мне?

Answer 1

Вы можете изменить ось y как таковую, это отличный синтаксис для ее первоначальной настройки. Кажется, что проблема заключается в попытке изменить ее сразу же после того, как chart.load не работает, но он выполняется до и в отдельности. Я подозреваю, что chart.load, возможно, асинхронен и восстанавливает предыдущую метку после завершения.

var chart = c3.generate({ 
    data: { 
     x : 'x', 
     columns: [ 
      ['x', 'www.site1.com', 'www.site2.com', 'www.site3.com', 'www.site4.com'], 
      ['download', 30, 200, 100, 400], 
      ['loading', 901, 100, 140, 200], 
     ], 
     groups: [ 
      ['download', 'loading'] 
     ], 
     type: 'bar' 
    }, 
    axis: { 
     x: { 
      type: 'category' // this needed to load string x value 
     }, 
     y: { 
      label: { 
       text: 'Y-Axis #1', 
       position: 'outer-middle' 
      } 
     } 
    } 
}); 

setTimeout(function() { 
    chart.axis.labels({y: 'New Y Axis Label'}); 
    chart.load({ 
     columns: [ 
      ['x', 'www.siteA.com', 'www.siteB.com', 'www.siteC.com', 'www.siteD.com'], 
      ['download', 130, 200, 150, 350], 
      ['loading', 190, 180, 190, 140], 
     ], 
    }); 

}, 1000); 

setTimeout(function() { 

    chart.load({ 
     columns: [ 
      ['x', 'www.siteA.com', 'www.siteB.com', 'www.siteC.com', 'www.siteD.com'], 
      ['download', 130, 220, 150, 350], 
      ['loading', 190, 180, 190, 140], 
     ], 
    }); 
    chart.axis.labels({y: 'New Y Axis Label 2'}); 
}, 2000); 

setTimeout(function() { 
    chart.axis.labels({y: 'New Y Axis Label 3'}); 
}, 4000);