javascript - 如何修改谷歌折线图的 JSON 字符串

Question

我在绘制 Google 多线图时遇到问题。我的应用程序在 Laravel 5.1 中，我正在从 MySQL 数据库中获取数据，然后将其转换为 JSON 字符串。此 JSON 充当 google 数据表的数据源。但是由于 JSON 数据格式，我无法绘制折线图并给出错误“给定轴上的所有系列必须具有相同的数据类型”。

我的 JSON 数据格式如下:

{"cols":[{"label":"Datetime","type":"date"},{"label":"Make","type":"string"},{"label":"Sales","type":"number"}],"rows":[{"c":[{"v":"Date(2011, 0, 31)"},{"v":"Datsun"},{"v":0}]},{"c":[{"v":"Date(2011, 1, 28)"},{"v":"Datsun"},{"v":0}]},{"c":[{"v":"Date(2011, 2, 31)"},{"v":"Datsun"},{"v":0}]},{"c":[{"v":"Date(2011, 3, 30)"},{"v":"Datsun"},{"v":0}]},{"c":[{"v":"Date(2011, 4, 31)"},{"v":"Datsun"},{"v":0}]},{"c":[{"v":"Date(2011, 5, 30)"},{"v":"Datsun"},{"v":0}]},{"c":[{"v":"Date(2011, 0, 31)"},{"v":"Fiat"},{"v":2150}]},{"c":[{"v":"Date(2011, 1, 28)"},{"v":"Fiat"},{"v":1839}]},{"c":[{"v":"Date(2011, 2, 31)"},{"v":"Fiat"},{"v":1860}]},{"c":[{"v":"Date(2011, 3, 30)"},{"v":"Fiat"},{"v":2030}]},{"c":[{"v":"Date(2011, 4, 31)"},{"v":"Fiat"},{"v":2143}]},{"c":[{"v":"Date(2011, 5, 30)"},{"v":"Fiat"},{"v":1500}]}]}

但是 Google-chart 需要以下 JSON 格式的数据:

 {"cols":[{"label":"Datetime","type":"date"},{"label":"Datsun","type":"string"}, {"label":"Fiat","type":"string"}],

"rows":[{"c":[{"v":"Date(2011, 0, 31)"},{"v":"0"},{"v":2150}]},{"c":  [{"v":"Date(2011, 1, 28)"},{"v":"0"},{"v":1839}]},{"c":[{"v":"Date(2011, 2, 31)"},{"v":"0"},{"v":1860}]}]}

简而言之，数据是这种格式:

Datetime       Make     Sales
2011-01-31    'Datsun'   0   
2011-02-28    'Datsun'   0
2011-03-31    'Datsun'   0
2011-01-31    'Fiat'     2150
2011-02-28    'Fiat'     1839
2011-02-31    'Fiat'     1860

我想要以下格式的数据:

Datetime     Datsun     Fiat
2011-01-31   0          2150
2011-02-28   0          1839
2011-3-31    0          1860

如何修改JSON数据使其兼容google折线图？

Answer 1

你可以这样做。在这里我忽略了几个边缘情况，(比如如果你没有在你的对象中得到 DatSun 或 Fiat，这将失败，但也可以很容易地处理)。

var tempObj={}
var colName=[]
    obj.rows.forEach(function(r){
    if(!tempObj[r.c[0].v]){
        tempObj[r.c[0].v]={};
        tempObj[r.c[0].v][r.c[1].v]=r.c[2].v;
        colName.indexOf(r.c[1].v)==-1 ? colName.push(r.c[1].v) : null;
    }
    else {
        tempObj[r.c[0].v][r.c[1].v]=r.c[2].v;
        colName.indexOf(r.c[1].v)==-1 ? colName.push(r.c[1].v) : null;
    }
    })

    result={}
    result.cols=[{"label":"Datetime","type":"date"}];
    for(var i=0;i< colName.length ; i++){
      result.cols.push({"label":colName[i],"type":"string"})
    }
    result.rows=[];
    for(var key in tempObj){
        var temp={};
        temp.c=[];
        temp.c.push({"v":key});
        for(var i=0;i< colName.length ; i++){
          temp.c.push({"v":tempObj[key][colName[i]]});
        }

        result.rows.push(temp);
    }

    console.log(result);