我在绘制谷歌多线图时遇到问题。我的应用程序在Laravel 5.1中,我正在从MySQL数据库获取数据,然后将其转换为JSON字符串。此 JSON 充当谷歌数据表的数据源。但是由于 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}]}]}
但是谷歌图表需要以下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数据以使其与谷歌折线图兼容?
你可以这样做。在这里,我忽略了几个边缘情况(例如,如果您的对象中没有 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);