旋转条形图数据标签格式答案

【问题标题】：Rotated bar chart data label format旋转条形图数据标签格式
【发布时间】：2015-11-17 03:32:52
【问题描述】：

我正在尝试格式化我在此处找到的旋转 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
}
});

但就是这样。任何意见是极大的赞赏。

谢谢！！

【问题讨论】：

标签： javascript d3.js c3.js

【解决方案1】：

我能够使用 C3.js 中内置的格式化函数成功格式化所有数据集，并在 Stack 上的 javascript 舍入答案的帮助下。

函数的格式为：

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

v 是显示标签的数据点的值。
id 是显示标签的数据的 id。
i 是显示标签的数据点的索引。
j 是显示标签的数据点的子索引。

这是我的最终标签代码：

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

谢谢大家！

【讨论】：