javascript - Json 到具有可变列数和数组的谷歌图表

Question

切换我的变量 chart 女巫包含这个 JSON:

[{
    "month": "January",
    "values": [0, 0, 0, 0, 0, 0, 0, 0, 0]
}, {
    "month": "February",
    "values": [0, 0, 0, 0, 0, 0, 0, 0, 0]
}, {
    "month": "March",
    "values": [35, 3, 8, 18, 0, 0, 0, 0, 0]
}, {
    "month": "April",
    "values": [36, 1, 0, 2, 0, 0, 0, 0, 0]
}, {
    "month": "May",
    "values": [0, 0, 0, 0, 0, 0, 0, 0, 0]
}, {
    "month": "June",
    "values": [0, 0, 0, 0, 0, 0, 0, 0, 0]
}, {
    "month": "July",
    "values": [0, 0, 0, 0, 0, 0, 0, 0, 0]
}, {
    "month": "August",
    "values": [0, 0, 0, 0, 0, 0, 0, 0, 0]
}, {
    "month": "September",
    "values": [0, 0, 0, 0, 0, 0, 0, 0, 0]
}, {
    "month": "October",
    "values": [0, 0, 0, 0, 0, 0, 0, 0, 0]
}, {
    "month": "November",
    "values": [0, 0, 0, 0, 0, 0, 0, 0, 0]
}, {
    "month": "December",
    "values": [0, 0, 0, 0, 0, 0, 0, 0, 0]
}]

“值”属性不是静态的，它取决于数据库中技术人员的数量。

我的列是这样初始化的:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Month');
var techlist = @Html.Raw(Json.Encode(ViewBag.techs));
for(var j=0; j<@ViewBag.nbTechs;j++){
    data.addColumn('number', techlist[j]);
}

所以我的问题是:如何将属性“month”放入 Month 列中，并将所有值放入我创建的列中的“values”中(按照“values”的顺序和数字列的创建顺序)？

在此先感谢您的帮助!

Answer 1

像这样的东西应该有用...

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

function drawTable() {
  var jsonData =
  [{
      "month": "January",
      "values": [0, 0, 0, 0, 0, 0, 0, 0, 0]
  }, {
      "month": "February",
      "values": [0, 0, 0, 0, 0, 0, 0, 0, 0]
  }, {
      "month": "March",
      "values": [35, 3, 8, 18, 0, 0, 0, 0, 0]
  }, {
      "month": "April",
      "values": [36, 1, 0, 2, 0, 0, 0, 0, 0]
  }, {
      "month": "May",
      "values": [0, 0, 0, 0, 0, 0, 0, 0, 0]
  }, {
      "month": "June",
      "values": [0, 0, 0, 0, 0, 0, 0, 0, 0]
  }, {
      "month": "July",
      "values": [0, 0, 0, 0, 0, 0, 0, 0, 0]
  }, {
      "month": "August",
      "values": [0, 0, 0, 0, 0, 0, 0, 0, 0]
  }, {
      "month": "September",
      "values": [0, 0, 0, 0, 0, 0, 0, 0, 0]
  }, {
      "month": "October",
      "values": [0, 0, 0, 0, 0, 0, 0, 0, 0]
  }, {
      "month": "November",
      "values": [0, 0, 0, 0, 0, 0, 0, 0, 0]
  }, {
      "month": "December",
      "values": [0, 0, 0, 0, 0, 0, 0, 0, 0]
  }];



  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Month');
  //var techlist = @Html.Raw(Json.Encode(ViewBag.techs));
  for(var j=0; j<jsonData[0].values.length;j++){
    data.addColumn('number', 'col' + j);
  }

  jsonData.forEach(function(row, index) {
    var currentDate = new Date();
    var rowData = [];
    rowData.push(row.month);
    if (currentDate.getMonth() >= index) {
      rowData = rowData.concat(row.values);
    } else {
      row.values.forEach(function() {
        rowData.push(null);
      });
    }
    data.addRow(rowData);
  });

  var visualization = new google.visualization.Table(document.getElementById('table'));
  visualization.draw(data, {});
}

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