如何从 JSON 对象为 Google 的日历图 api 创建行

Question

我在我的控制台中收到了 JSON 对象，如下所示：

我想转换这个 JSON 对象 以便我将它传递给 Google 的日历图 API addRows() 函数。

我的脚本如下：

function drawChart() {
   var dataTable = new google.visualization.DataTable();
   dataTable.addColumn({ type: 'date', id: 'Date' });
   dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
   dataTable.addRows([
        //HERE TO ADD DATA LIKE [new Date(2017, 09, 19),9],[new Date(2017, 09, 20),9]
    ]);

   var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));

   var options = {
     title: "Daily hours utilization",
     height: 350,
   };

   chart.draw(dataTable, options);

所以基本上我想转换

{today_date: "2017-09-19", hours: "9"}

到

[ new Date(2017, 9, 19), 9 ],

和输出像

Answer 1

var s = {today_date: "2017-09-19", hours: "9"};
var m = s.hours;
var d = s.today_date.split("-");
alert(d[0] + " " + d[1] + " " + d[2] + " " + m);

不要发出警报，而是在脚本中使用这些值。

Answer 2

本质上，您希望将日期字符串转换为日期对象。

实现此目的的一种方法是遍历您的 json 数据结构并从中构建一个行数组。此循环完成后，您可以将行数组传递给 addRows 方法。

假设您的 json 数据结构存储在名为 $jsonData

的变量中

//Store processed rows in this array
$rows = [];

//Sample json data structure (pull yours from the source)
$jsonData = [
    {
    today_date: "2017-09-19",
    hours: "9"
  },
  {
    today_date: "2017-09-20",
    hours: "9"
  },
];

//Loop over every object within the json data, parsing the date string and
//creating a date object from it.
//Add the date object and the hours field to the rows array
$jsonData.forEach(function($data){
    $dateElements = $data.today_date.split("-");
    $rows.push([
      new Date($dateElements[0], $dateElements[1], $dateElements[2]),
      $data.hours
  ]);
});

//Using your code above, add the rows
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'date', id: 'Date' });
dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
dataTable.addRows($rows);

我创建了一个小 jsfiddle，因此您可以从我的测试数据中看到行数组的输出：https://jsfiddle.net/JParkinson1991/aukwxo6L/

希望对您有所帮助！

编辑：来自 Abhijit Kumbhar

在您的指导下，我编辑了我的代码，现在它工作正常，我做了一些更改，它们如下：

最终解：

function drawChart() {
    var rows =[];

    jsDailyCount.forEach(function(data){
        var dateElements = data.today_date.split("-");
        rows.push([
            new Date(dateElements[0], dateElements[1], dateElements[2]),
            parseFloat(data.hours)
        ]);
    });

    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'date', id: 'Date' });
    dataTable.addColumn({ type: 'number', id: 'hours' });
    dataTable.addRows(rows);

    var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));
    var options = {
        title: "Daily hours utilization",
        height: 350,
    };
   chart.draw(dataTable, options);

如何从 JSON 对象为 Google 的日历图 api 创建行

How to create row for Google's calendar graph api from JSON Object

php

json

google-visualization

pygooglechart