格式化Google Charts API的JSON

Question

使用MongoDB / Node时，请考虑以下有效负载：

    var myObj = {
            "date" : "1-23-45",
            "one" : [
                    {
                            "a" : 8
                    },
                    {
                            "b" : 1
                    },
                    {
                            "c" : 9
                    },
                    {
                            "d" : 10
                    },
                    {
                            "e" : 12424
                    },
                    {
                            "f" : 11
                    },
                    {
                            "g" : 7
                    }
            ],
            "two" : [
                    {
                            "h" : 6
                    },
                    {
                            "i" : 10
                    }
            ]
    },
{
            "date" : "1-24-45",
            "one" : [
                    {
                            "a" : 8
                    },
                    {
                            "b" : 1
                    },
                    {
                            "c" : 9
                    },
                    {
                            "d" : 10
                    },
                    {
                            "e" : 12424
                    },
                    {
                            "f" : 11
                    },
                    {
                            "g" : 7
                    }
            ],
            "two" : [
                    {
                            "h" : 6
                    },
                    {
                            "i" : 10
                    }
            ]
    }

我正在使用Google Charts API，我想将这些点绘制到折线图中。 （请参见代码段）

 <html> <head> <script type="text/javascript" src="https://www.google.com/jsapi?autoload={ 'modules':[{ 'name':'visualization', 'version':'1', 'packages':['corechart'] }] }"></script> <script type="text/javascript"> google.setOnLoadCallback(drawChart); var myObj = { "cols": [{ "id": "", "label": "year", "type": "string" }, { "id": "", "label": "sales", "type": "number" }, { "id": "", "label": "expenses", "type": "number" }], "rows": [{ "c": [{ "v": "2001" }, { "v": 3 }, { "v": 5 }] }, { "c": [{ "v": "2002" }, { "v": 5 }, { "v": 10 }] }, { "c": [{ "v": "2003" }, { "v": 6 }, { "v": 4 }] }, { "c": [{ "v": "2004" }, { "v": 8 }, { "v": 32 }] }, { "c": [{ "v": "2005" }, { "v": 3 }, { "v": 56 }] }] } function drawChart() { var data = new google.visualization.DataTable(myObj); var options = { title: 'My Chart', curveType: 'function', legend: { position: 'right' } }; var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); chart.draw(data, options); } </script> </head> <body> <div id="curve_chart" style="width: 100%; height: 500px"></div> </body> </html>

使用我提供的JSON，将数据压缩为Google Charts API接受的格式的最有效方法是什么？ 我研究过D3，但它似乎有较高的学习曲线，这是最推荐的路线吗？ 以其他方式查询数据集/汇总结果会更好吗？

非常感谢您的帮助，因为这是一个为期2天的冒险活动！

更新-TL; DR无论有效负载有多大，我都需要一个格式＃1 =>格式＃2的脚本。

格式＃1-myObj

格式2-

var myObj = {
  "cols": [{
      "label": "Date",
      "type": "string"
    }, {
      "label": "a",
      "type": "number"
    }, {
      "label": "b",
      "type": "number"
    }, {
      "label": "c",
      "type": "number"
    }, {
      "label": "d",
      "type": "number"
    }, {
      "label": "e",
      "type": "number"
    }, {
      "label": "f",
      "type": "number"
    }, {
      "label": "g",
      "type": "number"
    }, {
      "label": "h",
      "type": "number"
    }, {
      "label": "i",
      "type": "number"
    }
  ],
  "rows": [{
      "c": [{
        "v": "day1"
      }, {
        "v": 300
      }, {
        "v": -500
      }, {
        "v": 23
      }, {
        "v": 120
      }, {
        "v": 150
      }, {
        "v": 1210
      }, {
        "v": 160
      }, {
        "v": 180
      }, {
        "v": 190
      }]
    }, {
      "c": [{
        "v": "day2"
      }, {
        "v": 1300
      }, {
        "v": -5200
      }, {
        "v": 253
      }, {
        "v": 6120
      }, {
        "v": 1350
      }, {
        "v": 110
      }, {
        "v": 2160
      }, {
        "v": 1180
      }, {
        "v": 1190
      }]
    }
  ]
}

Answer 1

查看您的数据以及如何格式化数据，类似下面的内容将起作用。 您将需要遍历每个对象以获得cols ，然后映射到每个数组以获得行。

var dataObj = {
    "cols": [],
    "rows": []
};

for(property in myObj) {
    if(typeof myObj[property] === 'string') {
        dataObj.cols.push({
            "label": property,
            "type": "string"
        });
    } else {
        dataObj.rows.push({
            "c": []
        });

        dataObj.rows[dataObj.rows.length - 1]["c"].push({
            "date": "day" + dataObj.rows.length // The day: 1, 2, 3, etc.
        });

        myObj[property].map(function(object) {
            for(prop in object) {
                dataObj.cols.push({
                    "label": prop,
                    "type": "number"
                });

                dataObj.rows[dataObj.rows.length - 1]["c"].push({
                    "v": object[prop]
                });
            }
        });
    }
}

带有Google Chart的JSFiddle示例（打开控制台可查看格式化的数据）

格式化Google Charts API的JSON

问题描述

1 个解决方案

解决方案1
4 已采纳 2015-07-02 18:01:33

格式化Google Charts API的JSON

问题描述

1 个解决方案

解决方案1 4 已采纳 2015-07-02 18:01:33

解决方案1
4 已采纳 2015-07-02 18:01:33