c3圖表中的多行標籤

Question

如何在c3圖表中實現多行標籤？

請參考 - http://c3js.org/samples/axes_label.html

在上面的例子中，你可以看到「X標籤」標籤顯示爲

X標籤

但我想它用兩個詞來分解，最後顯示爲

X 標籤

這是SVG，而不是正常的HTML。怎麼做？

Answer 1

我已經打破它變成tspan這樣

var chart = c3.generate({ 
    data: { 
     columns: [ 
      ['sample', 30, 200, 100, 400, 150, 250], 
      ['sample2', 130, 300, 200, 500, 250, 350] 
     ], 
     axes: { 
      sample2: 'y2' 
     } 
    }, 
    axis: { 
     x: { 
      label: 'x-label' 
     }, 
     y: { 
      label: 'Y Label' 
     }, 
     y2: { 
      show: true, 
      label: 'Y2 Label' 
     } 
    } 
}); 
var label = d3.select(".c3-axis-x-label"); 
var text = label.text();//this will give you the text 
label.text("");//setting the label to be blank 

label.append("tspan").text("hello ");//making a tspan and adding to x label DOM 
label.append("tspan").text("World");//making a tspan and adding to x label text DOM 

工作代碼的兩個DOM元素here

編輯

您可以通過調節dx和dy屬性

放置標籤

label.append("tspan").text("hello ").attr("dx", -30);;//making a tspan and adding to x label DOM 
label.append("tspan").text("World").attr("dy", 20).attr("dx", -25);//making a tspan and adding to x label text DOM 

工作代碼here

希望這會有所幫助！