Question

我正在尝试格式化此旋转的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('%')
        }
    }

数据标签消失。

我不能同时使用标签：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
}
});

但是那就是它。任何意见是极大的赞赏。

谢谢！

Answer 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) + '%';
        }
    }

谢谢大家！

旋转条形图数据标签格式

1 个答案: