是否可以爲c3.js加載新的y軸標籤？

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);