Question

我的c3.js输入有问题。我想要一个包含数据库数据的分组条形图。 DB的输出是：

var chart = c3.generate({
data: {
    "rows":[
        ["dataSeries-Y-1048","dataSeries-X-1048","dataSeries-Y-1049","dataSeries-X-1049","dataSeries-Y-1050","dataSeries-X-1050"],
        ["4.4%","12","9.19%","12","86.41%","12"],
        ["7.58%","15","8.66%","15","83.76%","15"],
        ["5.58%","16","14.3%","16","80.12%","16"],
        ["6.61%","17","16.76%","17","76.63%","17"],
        ["4.93%","18","14.39%","18","80.68%","18"],
        ["8.26%","19","18.82%","19","72.92%","19"],
        ["8.06%","20","21.31%","20","70.63%","20"],
        ["7.25%","21","25.82%","21","66.93%","21"],
        ["7.51%","22","19.43%","22","73.05%","22"],
        ["1.59%","23","4.3%","23","94.11%","23"],
        ["5.28%","25","9.6%","25","85.12%","25"],
        ["9.27%","27","12.08%","27","78.64%","27"],
        ["11.74%","28","13.92%","28","74.34%","28"]
    ],
    "type":"bar",
    "unload":["dataSeries-Y-1048","dataSeries-X-1048","dataSeries-Y-1049","dataSeries-X-1049","dataSeries-Y-1050","dataSeries-X-1050"],
    "xs":{
        "dataSeries-Y-1048":"dataSeries-X-1048","dataSeries-Y-1049":"dataSeries-X-1049","dataSeries-Y-1050":"dataSeries-X-1050"
    },
    "groups": [["dataSeries-Y-1048","dataSeries-Y-1049","dataSeries-Y-1050"]],
    "colors": {            
        "dataSeries-Y-1048": "#f43333",            
        "dataSeries-Y-1049": "#212d9e",            
        "dataSeries-Y-1050": "#13bc07"        
    },
    "order": "asc"
},
axis: {
    x: {
        type: 'category',
        tick: {
            format: '%Y-%m-%d'
        }
    }
}
});

但是c3的百分号有问题。是否有一种简单的方法来管理它？

Answer 1

您应该从数据中删除百分号：

"rows":[
    ["dataSeries-Y-1048","dataSeries-X-1048","dataSeries-Y-1049","dataSeries-X-1049","dataSeries-Y-1050","dataSeries-X-1050"],
    ["4.4","12","9.19","12","86.41","12"],
    ...
    ...
    ["11.74","28","13.92","28","74.34","28"]
],

相反，您应将百分比指定为data format ：

axis: {
    y: {
        tick: {
            format: function(value){
                return d3.format('.2%')(value/100)
            }
        }
    }
}

请参阅this fiddle。

C3.js百分号输入

1 个答案: