Question

如何在c3js中格式化json？我希望projectcount为y轴，date为x轴，每行为不同用户。

请帮我弄清楚。

{"ProjectList":[{"date":"18-07-2017","projectcount":2,"user":"Salva"},
{"date":"10-07-2017","projectcount":1,"user":"Jaspreet Kaur"},
{"date":"07-07-2017","projectcount":1,"user":"Sukanya Ray"},
{"date":"29-06-2017","projectcount":1,"user":"Asmita Bhurke"},
{"date":"06-08-2017","projectcount":2,"user":"Salman AP Homes"},
{"date":"31-07-2017","projectcount":1,"user":"Alena Sandra"},
{"date":"27-07-2017","projectcount":1,"user":"Salva"},
{"date":"25-07-2017","projectcount":2,"user":"Salva"},
{"date":"21-07-2017","projectcount":1,"user":"Jaspreet Kaur"},
{"date":"21-07-2017","projectcount":2,"user":"Sandeep Ghanekar"}]}

Answer 1

我将采用这三个数据点来说明：

{"date":"31-07-2017","projectcount":1,"user":"Alena Sandra"},
{"date":"27-07-2017","projectcount":1,"user":"Salva"},
{"date":"25-07-2017","projectcount":2,"user":"Salva"},

对于您想要的每一行，您都要创建一个以行名开头的数组然后设置其数据，用空值填补空白而且你必须设置从第一个到最后一个日期的时间序列数组（以＆＃34; x＆＃34;开头）：

var chart = c3.generate({
    data: {
        x: 'x',
        xFormat: '%d-%m-%Y', // parse format
        "columns": [
            [
                "x",
                "25-07-2017",
                "26-07-2017",
                "27-07-2017",
                "28-07-2017",
                "29-07-2017",
                "30-07-2017",
                "31-07-2017"
            ],
            [
                "Salva",
                2,
                null,
                1,
                null, 
                null, 
                null, 
                null
            ],
            [
                "Alena Sandra",
                null, 
                null, 
                null, 
                null, 
                null, 
                null,
                1
            ]
        ]
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: '%d-%m-%Y' // display format
            }
        }
    },
    line: {
        connectNull: true
    }
});

请参阅in action。

Answer 2

我们可以根据图形需要格式化JSON。您可以按如下方式创建图形

var items = {
        "ProjectList": [{ "date": "07-18-2017", "projectcount": 2, "user": "Salva" },
{ "date": "07-10-2017", "projectcount": 1, "user": "Jaspreet Kaur" },
{ "date": "07-07-2017", "projectcount": 1, "user": "Sukanya Ray" },
{ "date": "06-29-2017", "projectcount": 5, "user": "Asmita Bhurke" },
{ "date": "08-06-2017", "projectcount": 1, "user": "Salman AP Homes" },
{ "date": "07-31-2017", "projectcount": 3, "user": "Alena Sandra" },
{ "date": "07-27-2017", "projectcount": 4, "user": "Sandeep Ghanekar" },
{ "date": "07-25-2017", "projectcount": 2, "user": "Salva" },
{ "date": "07-21-2017", "projectcount": 6, "user": "Jaspreet Kaur" },
{ "date": "07-04-2017", "projectcount": 5, "user": "Sandeep Ghanekar" },
{ "date": "07-08-2017", "projectcount": 7, "user": "Salva" },
{ "date": "07-21-2017", "projectcount": 2, "user": "Jaspreet Kaur" },
{ "date": "07-21-2017", "projectcount": 2, "user": "Sandeep Ghanekar" }]
    }
var persons=[];
var valueToPush = new Array();

var uniqueArray =  items.ProjectList.reduce(function (a, d) {
   if (a.indexOf(d.date) === -1) {
     a.push(""+d.date+"");
   }
   return a;
}, ['x']);

uniqueArray.sort(function(a, b) {
dateA  = new Date(a), 
dateB = new Date(b);
return dateA - dateB;
});

var nameArray =  items.ProjectList.reduce(function (a, d) {
   if (a.indexOf(d.user) === -1) {
     a.push(""+d.user+"");
   }
   return a;
}, []);
valueToPush[0]=uniqueArray;
var i=1;
nameArray.forEach(function(c){
persons=[];
persons.push(""+c+"")
items.ProjectList.forEach(function(b){
  if(c===b.user){
    persons.push(b.projectcount)
  }
else{
    persons.push(null)
  }
});
valueToPush[i]=persons;
i++;
});

var chart = c3.generate({
data: {
    x: 'x',
    xFormat: '%d-%m-%Y', 
    "columns": valueToPush
},
axis: {
    x: {
        type: 'category',
        tick: {
            format: '%d-%m-%Y' 
        }
    }
},
line: {
    connectNull: true
}
});

提及JavaScript support Date formats

试试这个JSFiddle

如何格式化c3js中的json数据？

2 个答案: