Question

我的要求是画一个饼图。为此，我将JSON传递给Google图表库，如下所示

  script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-json/2.5.1/jquery.json.min.js"></script>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        ${devicegroupusers}
        <c:url value="${UrlRequestMappingConstants.DASHBOARD_DEVICEGROUP_USERS}" var="formUrl"/>

          <script type="text/javascript">
              google.load("visualization", "1", {packages:["corechart"]});
              google.setOnLoadCallback(drawChart);
              function drawChart(devicegroupusers) {

                  var a = devicegroupusers, result = [];

                a = JSON.parse(a);

                for (var o = 0; o < a.length; o++) {
                    for (var p in a[o]) {
                        result.push([p, a[o][p]]);
                    }
                };

                console.log(result);

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

                var options = {
                  title: 'My Daily Activities'
                };

                var chart = new google.visualization.BarChart(document.getElementById('piechart'));

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

devicegroupusers包含这样的JSON

 [{"name":"Default","count":2},{"name":"IT","count":1},{"name":"R\u0026D","count":1}]

如何将此转换为以下示例以绘制条形图？

['name', 'count'],
  ['Default',  2],
  ['IT',  3],
  [R\u0026D', 1],

Answer 1

像这样：

var devicegroupusers = '[{"name":"Default","count":2},{"name":"IT","count":1},{"name":"R\u0026D","count":1}]', 
  result = [["name","count"]],
  devicegroupusers = JSON.parse(devicegroupusers);

$.each(devicegroupusers ,function(_,devicegroupuser) {
  result.push(
    [
      devicegroupuser["name"],devicegroupuser["count"]
    ]
  );
});
console.log(result);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 2

您可以将json数组转换为此对象。

var text = '[{"name":"Default","count":2},{"name":"IT","count":1},{"name":"R\u0026D","count":1}]';
    var a = JSON.parse(text);
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'name');
    data.addColumn('number', 'count');

    for (var i = 0; i < a.length; i++) {
        data.addRow([a[i].name, a[i].count]);
    }

将此数据传递给条形图....它会起作用。

将JSON转换为数组以绘制条形图

2 个答案: