javascript - Google Chart使用Ajax检索

目前，我能够获得响应，但是我不确定如何检索和设置数据。

当我调试jsonData时，它们将显示：
https://gyazo.com/088664e92099686e7509a2fe7b483364
https://gyazo.com/ef8af2f64fe7fd93743fc1933ea63817

当我调试jsonData responseText时，它们将显示“对象JSON”

   <script type="text/javascript">
    google.load('visualization', '1.1', {packages: ['line']});
    google.setOnLoadCallback(drawChart);

    function drawChart() {
         var jsonData = $.ajax({
          url: "Reports/reportDetail",
           data: "cat_id=" + $("#cat").val(),
          dataType:"json",
          cache: false //Always false.
          });
          console.log(jsonData);
           var res = jsonData.responseText;

      var data = new google.visualization.DataTable(res);
      console.log(data);

        var data = new google.visualization.DataTable();
      data.addColumn('string', 'Hours');
      data.addColumn('number', 'South');
      data.addColumn('number', 'South-East');
      data.addColumn('number', 'North-East');
      data.addColumn('number', 'North');

      data.addRows([

      ]);

      var options = {
        chart: {
          title: 'Time Interval during the Event',
          subtitle: 'Number Of People'
        },
        width: 1000,
        height: 600
      };

      var chart = new google.charts.Line(document.getElementById('linechart_material'));

      chart.draw(data, options);

    }
  </script>

当我调试数据时
他们显示此：https://gyazo.com/125a7049606c51f0f47569a84679f81c

最佳答案

尝试下面的代码，这里res[i].value1，res[i].value2等将是从JSON对象返回的相应属性。

<script type="text/javascript">
    google.load('visualization', '1.1', { packages: ['line'] });
    google.setOnLoadCallback(drawChart);

    function drawChart() {
        var jsonData = $.ajax({
            url: "Reports/reportDetail",
            data: "cat_id=" + $("#cat").val(),
            dataType: "json",
            cache: false //Always false.
        });
        console.log(jsonData);
        var res = jsonData.responseText;
        if (res != null) {

            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Hours');
            data.addColumn('number', 'South');
            data.addColumn('number', 'South-East');
            data.addColumn('number', 'North-East');
            data.addColumn('number', 'North');

            for (var i = 0; i < res.length; i++) {
                data.addRow([res[i].value1, res[i].value2, res[i].value3, res[i].value4, res[i].value5]);
            }

            var options = {
                chart: {
                    title: 'Time Interval during the Event',
                    subtitle: 'Number Of People'
                },
                width: 1000,
                height: 600
            };

            var chart = new google.charts.Line(document.getElementById('linechart_material'));

            chart.draw(data, options);
        }
    }
</script>