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

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我每个Bankname都有12个月（JSON可以有多个银行名称）。我想为每个bankname显示一个line-bar，在x轴上显示Month name。

此时我只能在名称行中看到一个带有bank混合值的折线图。这是我的代码：

    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'],
    }
}