Question

我有一个JSON，它存储这样的多个值，

[
  {"Description":"bankname1", "Month":"April", "Amount":"1700"},
  {"Description":"bankname1", "Month":"June", "Amount":"1300"},
  {"Description":"bankname1", "Month":"March", "Amount":"1500"},
  {"Description":"bankname2", "Month":"March", "Amount":"100"},
  {"Description":"bankname2", "Month":"April", "Amount":"1200"},
]

对于这个JSON，我每个银行名称都有12个月的时间（JSON可以有多个银行名称）。我想为每个银行名称显示一个线形，并在x轴上显示月份名称。

目前，我只能看到一个折线图，其名称行上混合了银行的价值。这是我的代码：

    var chart = c3.generate({
        bindto: '#c3_incassi',
        data: {
            json: data,
            keys: {
                x: 'MONTH', 
                value: ['AMOUNT']
            },
            type: 'line'
        },
        axis: {
            x: {
                type: 'category',
                categories: ['GENNAIO', 'FEBBRAIO', 'MARZO', 'APRILE', 'MAGGIO', 'GIUGNO', 'LUGLIO', 'AGOSTO', 'SETTEMBRE', 'OTTOBRE', 'NOVEMBRE', 'DICEMBRE'],
            }
        }
    });

如何解决此问题？非常感谢再见

弗朗切斯科

Answer 1

您需要将json数据转换为正确的格式，如Abhas所评论的那样。具有多条线的c3.js折线图的正确json格式如下：

{"bankname1":[1700,1300,1500,1100,1400,1800,2000,2100,1900,1100,1250,1050],"bankname2":[100,1200,300,1100,400,700,350,200,1200,1400,1050,900]}

json字符串包含“ bankname1”，后跟12个数字值，每个月一个，然后是“ bankname2”，后跟12个数字，等等。

如果在服务器端使用php，则可以通过以下方式将json数据回显到c3.js中，称为“数据集”：

var dataset = <?php echo $dataset; ?>;
data: { 
    json: dataset
},

我正以相同的方式做这件事，并且它起作用了。您可以在代码中设置的轴标签：

axis: {
    x: {
        type: 'category',
        categories: ['GENNAIO', 'FEBBRAIO', 'MARZO', 'APRILE', 'MAGGIO', 'GIUGNO', 'LUGLIO', 'AGOSTO', 'SETTEMBRE', 'OTTOBRE', 'NOVEMBRE', 'DICEMBRE'],
    }
}

来自c3.js上的JSON的两个折线图

1 个答案: