谷歌图表检索与ajax

Google Chart retrieve with ajax

本文关键字：ajax 检索谷歌更新时间：2023-09-26

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

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

当我调试jsonData responseText时，它们将显示"object 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>