旋轉的條形圖數據標籤格式

我試圖格式化數據標籤我對這個旋轉x軸條形圖在這裏找到：http://jsfiddle.net/blackrimsolutions/01bqmbws/旋轉的條形圖數據標籤格式

如果我只放：

labels: true

它顯示了標籤但沒有按百分比格式化。

如果我所說的標籤陣列：

 labels: { 
     format: { 
      data1: d3.format('%'), 
      data2: d3.format('%'), 
      data3: d3.format('%'), 
      data4: d3.format('%'), 
      data5: d3.format('%'), 
      data6: d3.format('%'), 
      data7: d3.format('%'), 
      data8: d3.format('%'), 
      data9: d3.format('%'), 
      data10: d3.format('%') 
     } 
    }

數據標籤消失。我不能同時擁有label：true和數組。我已經嘗試了其他幾種方法來使其工作，但它似乎主要不適用於旋轉軸。

它的工作原理是圖表：

var chart1 = c3.generate({ 
bindto: "#chart1", 
padding: { 
    top: 20, 
    right: 40, 
    left: 40 
}, 
data: { 
    x: 'x', 
    columns: [ 
     ['x', '2013', '2014'], 
     ['data1', 0, 0], 
     ['data2', 0, 0] 
    ], 
    names: { 
     data1: 'Sales Growth', 
     data2: 'Trans Growth' 
    }, 
    type: 'bar', 
    labels: { 
     format: { 
      data1: d3.format('%'), 
      data2: d3.format('%') 
     } 
    } 
}, 
grid: { 
    y: { 
     show: true 
    } 
}, 
transition: { 
    duration: 2000 
}, 
bar: { 
    width: { 
     ratio: 0.5 
    } 
}, 
axis: { 
    y: { 
     tick: { 
      format: d3.format('%') 
     } 
    }, 
    x: { 
     type: 'category', 
     tick: { 
      rotate: 0, 
      multiline: false 
     }, 
     centered: true, 
     height: 30 
    } 
}, 
color: { 
    pattern: ['#A2AD00', '#FEB612', '#00A9ED', '#004165', '#F79447', '#C01324', '#FB4F14'] 
}, 
tooltip: { 
    show: false 
} 
});

但僅此而已。任何意見是極大的讚賞。

謝謝！

來源

2015-11-17 Jay

我能夠成功地格式化所有的數據集使用格式函數內置C3.js，並在這裏幫助翻譯回答這裏的Stack。

該函數的格式是：

format: function (v, id, i, j) { ... }

v是其中示出標籤數據點的值。
id是顯示標籤的數據的標識。
i是顯示標籤的數據點的索引。
j是顯示標籤的數據點的子索引。

這是我最後的標籤代碼：

labels: { 
     format: function (v) { 
      'use strict'; 
      var percent = (Math.round((v * 1000)/10)/100); 
      return (percent * 100).toFixed(2) + '%'; 
     } 
    }

謝謝大家！

來源

2015-11-17 14:01:29 Jay

旋轉的條形圖數據標籤格式

回答

相關問題