Question

尝试用这种（缩短的）格式将我的第一个谷歌折线图与JSON api数据放在一起：

{"Battery Voltage, (V)":{"2017-10-09T00:00:00.000Z":12.5,"2017-10-09T00:01:00.000Z":12.44,"2017-10-09T00:02:00.000Z":12.43}}

据我所知，它必须采用以下格式：

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Datetime', 'Battery Voltage, (V)'],
          ['2017-10-09T00:00:00.000Z',  12.50],
          ['2017-10-09T00:01:00.000Z',  12.44],
          ['2017-10-09T00:02:00.000Z',  12.43],
        ]);

        var options = {
          title: 'Battery Voltage',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="curve_chart" style="width: 900px; height: 500px"></div>
  </body>
</html>

我的问题是：如何将我的json数据转换成正确的格式？即：

    {
    "cols":[
        {"label":"Datetime","type":"datetime"},
        {"label":"Battery Voltage, (V)","type":"number"},
         ],
    "rows":[{"c":[{"v":"2017-10-09T00:00:00.000Z"}{"v":12.50}
            {"c":[{"v":"2017-10-09T00:00:00.000Z"}{"v":12.50}
    ]
}

Answer 1

使用javascript，您可以使用以下代码段转换json ...

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]]);
  });
});

以上将创建一个数组如下......

[
  ["Datetime","Battery Voltage, (V)"],
  ["2017-10-09T00:00:00.000Z",12.5],
  ["2017-10-09T00:01:00.000Z",12.44],
  ["2017-10-09T00:02:00.000Z",12.43]
]

然后可以与静态方法一起使用 - ＆gt; arrayToDataTable
创建数据表

var data = google.visualization.arrayToDataTable(chartData);

请参阅以下工作代码段...

＆＃13;

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var jsonData = {"Battery Voltage, (V)":{"2017-10-09T00:00:00.000Z":12.5,"2017-10-09T00:01:00.000Z":12.44,"2017-10-09T00:02:00.000Z":12.43}};

  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]]);
    });
  });
  var data = google.visualization.arrayToDataTable(chartData);

  var options = {
    chartArea: {
      bottom: 48
    },
    title: 'Battery Voltage',
    curveType: 'function',
    legend: { position: 'bottom' }
  };

  var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

  chart.draw(data, options);
});

＆＃13;

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

＆＃13;

更正Google折线图的JSON结构

1 个答案: