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

Posted 2023-02-24

【中文标题】如何修改谷歌折线图的JSON字符串

【英文标题】：How to modify the JSON string for google line chart

【发布时间】：2016-05-19 00:30:06

【问题描述】：

我在绘制 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 数据以使其与谷歌折线图兼容？

【参考方案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);

【讨论】：

@prashant .....感谢您的回复。在这里，您对列名和类型进行了硬编码。但实际上列名将是动态的，它取决于最终用户选择的值。我怎样才能做到这一点？

总是只有两个 3 列吗？？

@rahul16590 我已经进行了必要的更改

最少 2 列，最多 16 列，这取决于用户选择的品牌名称。

@rahul16590 我已经相应地更新了我的答案。我想现在它会处理所有的情况