如何将 Json 转换为谷歌可视化数据表 [英] How To Convert Json to google visualization datatable

问题描述

我有一个通过ajax调用服务器获取json结果的方法

var jsonData = $.ajax({url: '/Reports/GetJsonData',类型:'获取'，数据类型:'json'，错误:函数(错误){alert("错误:"+err.statusText);}}).responseText;

然后我可以将以下 Json 结果发送到jsonData"变量中.

<预><代码>[{"LineName":"L1","Car":23,"Bus":0,"Motorcycle":0,"Person":0,"Others":0},{"LineName":"L2","Car":0,"Bus":0,"Motorcycle":6,"Person":0,"Others":0},{"LineName":"L3","Car":10,"Bus":20,"Motorcycle":36,"Person":13,"Others":0}]

我想把这个结果转换成下面的格式

 [['LineName', 'Car', 'Bus','Motorcycle', 'Person','Others'],['L1', 23, 0, 0,0,0],['L2', 0, 0, 6,0,0],['L3', 10, 20, 36,13,0]]

然后我想在google可视化API中使用它来绘制图形

var data = new google.visualization.arrayToDataTable(jsonData);

我只需要知道是否有任何简单的方法可以转换可以传递给 google.visualization 的数据

解决方案

查看以下工作片段...

google.charts.load('current', {回调:drawChart，包:['表']});函数 drawChart() {var jsonData = [{"LineName":"L1","Car":23,"Bus":0,"Motorcycle":0,"Person":0,"Others":0},{"LineName":"L2","Car":0,"Bus":0,"Motorcycle":6,"Person":0,"Others":0},{"LineName":"L3","Car":10,"Bus":20,"Motorcycle":36,"Person":13,"Others":0}];var gglData = [];如果(jsonData.length > 0){//加载列标题var colHead = [];Object.keys(jsonData[0]).forEach(function (key) {colHead.push(key);});gglData.push(colHead);//加载数据行jsonData.forEach(函数(行){var gglRow = [];Object.keys(row).forEach(function (key) {gglRow.push(row[key]);});gglData.push(gglRow);});}//arrayToDataTable 是一个静态方法，不需要new"关键字var 数据 = google.visualization.arrayToDataTable(gglData);var table = new google.visualization.Table(document.getElementById('table_div'));table.draw(数据)；}

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

I have a method with ajax call to the server to get json result

var jsonData = $.ajax({
        url: '/Reports/GetJsonData',
        type: 'GET',
        dataType: 'json',
        error: function (err) {
            alert("Error : "+err.statusText);
        }
 }).responseText;

Then I can get the Following Json result to the "jsonData" variable.

[
 {"LineName":"L1","Car":23,"Bus":0,"Motorcycle":0,"Person":0,"Others":0}
,{"LineName":"L2","Car":0,"Bus":0,"Motorcycle":6,"Person":0,"Others":0}
,{"LineName":"L3","Car":10,"Bus":20,"Motorcycle":36,"Person":13,"Others":0}
]

I want to convert this result to the following format

 [['LineName', 'Car', 'Bus','Motorcycle', 'Person','Others'],
  ['L1', 23, 0, 0,0,0],
  ['L2', 0, 0, 6,0,0],
  ['L3', 10, 20, 36,13,0]]

Then I want to use it in google visualization API for drawing a graph

var data = new google.visualization.arrayToDataTable(jsonData);

I just need to know if there any simple way to convertion the data which can pass to the google.visualization

解决方案

see following working snippet...

google.charts.load('current', {
  callback: drawChart,
  packages:['table']
});

function drawChart() {
  var jsonData = [
    {"LineName":"L1","Car":23,"Bus":0,"Motorcycle":0,"Person":0,"Others":0},
    {"LineName":"L2","Car":0,"Bus":0,"Motorcycle":6,"Person":0,"Others":0},
    {"LineName":"L3","Car":10,"Bus":20,"Motorcycle":36,"Person":13,"Others":0}
  ];

  var gglData = [];
  if (jsonData.length > 0) {
    // load column headings
    var colHead = [];
    Object.keys(jsonData[0]).forEach(function (key) {
      colHead.push(key);
    });
    gglData.push(colHead);

    // load data rows
    jsonData.forEach(function (row) {
      var gglRow = [];
      Object.keys(row).forEach(function (key) {
        gglRow.push(row[key]);
      });
      gglData.push(gglRow);
    });
  }

  // arrayToDataTable is a static method, "new" keyword not needed
  var data = google.visualization.arrayToDataTable(gglData);
  var table = new google.visualization.Table(document.getElementById('table_div'));
  table.draw(data);
}

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

这篇关于如何将 Json 转换为谷歌可视化数据表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！