Question

我正在尝试将此json转换为Google图表的正确格式：

var jsonData =  {"Battery Voltage, (A)":
                    {"2017-11-11T00:00:00.000Z":12.3
                    ,"2017-11-11T00:01:00.000Z":12.35
                    ,"2017-11-11T00:02:00.000Z":12.6
                    ,"2017-11-11T00:03:00.000Z":12.7
                    ,"2017-11-11T00:04:00.000Z":12.8}
                ,"Battery Current, (A)":
                    {"2017-11-11T00:00:00.000Z":1.3
                    ,"2017-11-11T00:01:00.000Z":1.4
                    ,"2017-11-11T00:02:00.000Z":1.5
                    ,"2017-11-11T00:03:00.000Z":1.6
                    ,"2017-11-11T00:04:00.000Z":1.7}};

或者，我可以得到这样的数据：

var jsonData_2 =
{"2017-11-16T00:00:00.000Z":
          {"Charge Current, (A)":0.001373312,"Battery Voltage, (V)":12.9267109178}
,"2017-11-16T00:01:00.000Z":
          {"Charge Current, (A)":0.001373312,"Battery Voltage, (V)":12.9267109178}
,"2017-11-16T00:02:00.000Z":
          {"Charge Current, (A)":0.001373312,"Battery Voltage, (V)":12.9267109178}
,"2017-11-16T00:03:00.000Z":
          {"Charge Current, (A)":0.001373312,"Battery Voltage, (V)":12.9267109178}
,"2017-11-16T00:04:00.000Z":
          {"Charge Current, (A)":0.001373312,"Battery Voltage, (V)":12.9267109178}};

我正在尝试将此json转换为google折线图的正确格式：

[
          ['Datetime', 'Battery Current, (A)', 'Battery Voltage, (A)'],
          ['2017-11-11 01:00',  1.3,      12.3],
          ['2017-11-11 02:00',  1.4,      12.35],
          ['2017-11-11 03:00',  1.5,      12.6],
          ['2017-11-11 04:00',  1.6,      12.7]
        ]

我可以将此代码用于单个列：

var chartData = [];
Object.keys(jsonData).forEach(function (column) {
  chartData.push(['Datetime', column]);
  Object.keys(jsonData[column]).forEach(function (dateValue) {
    chartData.push([new Date(dateValue), jsonData[column][dateValue]]);
  });
});

但我不确定如何将其修改为两个？

Answer 1

首先，构建一个列标题数组......

// build chart columns
var chartCols = ['Datetime'];
Object.keys(jsonData).forEach(function (column) {
  chartCols.push(column);
});

然后是一个唯一的日期列表......

// build list of date
var dateValues = [];
Object.keys(jsonData).forEach(function (column) {
  Object.keys(jsonData[column]).forEach(function (dateValue) {
    if (dateValues.indexOf(dateValue) === -1) {
      dateValues.push(dateValue);
    }
  });
});

然后您可以使用每个日期在相应列中查找值，
如果它存在......

// build chart data
var chartData = [chartCols];
dateValues.forEach(function (dateValue) {
  var row = [new Date(dateValue)];
  Object.keys(jsonData).forEach(function (column) {
    row.push(jsonData[column][dateValue] || null);
  });
  chartData.push(row);
});

google.charts.load('current', {
  packages: ['table']
}).then(function () {
  var jsonData = {
    "Battery Voltage, (A)":
      {"2017-11-11T00:00:00.000Z":12.3
      ,"2017-11-11T00:01:00.000Z":12.35
      ,"2017-11-11T00:02:00.000Z":12.6
      ,"2017-11-11T00:03:00.000Z":12.7
      ,"2017-11-11T00:04:00.000Z":12.8}
    ,"Battery Current, (A)":
      {"2017-11-11T00:00:00.000Z":1.3
      ,"2017-11-11T00:01:00.000Z":1.4
      ,"2017-11-11T00:02:00.000Z":1.5
      ,"2017-11-11T00:03:00.000Z":1.6
      ,"2017-11-11T00:04:00.000Z":1.7}
  };

  // build chart columns
  var chartCols = ['Datetime'];
  Object.keys(jsonData).forEach(function (column) {
    chartCols.push(column);
  });

  // build list of date
  var dateValues = [];
  Object.keys(jsonData).forEach(function (column) {
    Object.keys(jsonData[column]).forEach(function (dateValue) {
      if (dateValues.indexOf(dateValue) === -1) {
        dateValues.push(dateValue);
      }
    });
  });

  // build chart data
  var chartData = [chartCols];
  dateValues.forEach(function (dateValue) {
    var row = [new Date(dateValue)];
    Object.keys(jsonData).forEach(function (column) {
      row.push(jsonData[column][dateValue] || null);
    });
    chartData.push(row);
  });

  var table = new google.visualization.Table(document.getElementById('table_div'));
  table.draw(google.visualization.arrayToDataTable(chartData));
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table_div"></div>

转换谷歌图表数据表的JSON数据

1 个答案: