Question

我正在通过AJAX调用从MS数据库加载数据。返回时，我的表将返回并显示在页面上。

当我在开发编辑器中查看时，我可以看到Google Charts的JS正在返回，但它没有显示在屏幕上。

我是否需要以某种方式重新打印此数据？我已经尝试过将Google代码移到我的AJAX调用中，但是随后丢失了捕获的数组。

感谢您的帮助。

// AJAX呼叫

function reportBuild(date1, date2, dataType){
  date2 = $("#dateRangeA").val();
  date1 = $("#dateRangeB").val();
  dataType = $("#dataType").val();

  var xhttp;
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("chartBuild").innerHTML = this.responseText;
    }
  }
  xhttp.open("GET", "test.asp?d1="+date1+"&d2="+date2+"&dataType="+dataType, true);
  xhttp.send();

}

// test.asp页

var testArray = [];

        testArray = [
          <%
          do until DataChartFetch.EOF
            %>
            ['<% Response.Write(DataChartFetch.Fields(dataType&"Name1")) %>',
            <% Response.Write(DataChartFetch.Fields(dataType&"Num1")) %>,
            <% Response.Write(DataChartFetch.Fields(dataType&"Num1")) %>],

            ['<% Response.Write(DataChartFetch.Fields(dataType&"Name2")) %>',
            <% Response.Write(DataChartFetch.Fields(dataType&"Num2")) %>,
            <% Response.Write(DataChartFetch.Fields(dataType&"Num2")) %>],

            ['<% Response.Write(DataChartFetch.Fields(dataType&"Name3")) %>',
            <% Response.Write(DataChartFetch.Fields(dataType&"Num3")) %>,
            <% Response.Write(DataChartFetch.Fields(dataType&"Num3")) %>],

            ['<% Response.Write(DataChartFetch.Fields(dataType&"Name4")) %>',
            <% Response.Write(DataChartFetch.Fields(dataType&"Num4")) %>,
            <% Response.Write(DataChartFetch.Fields(dataType&"Num4")) %>],

            ['<% Response.Write(DataChartFetch.Fields(dataType&"Name5")) %>',
            <% Response.Write(DataChartFetch.Fields(dataType&"Num5")) %>,
            <% Response.Write(DataChartFetch.Fields(dataType&"Num5")) %>],
          <%
          DataChartFetch.MoveNext
            loop
          %>
        ]


google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(barchart_material);
      function barchart_material() {

        var data = new google.visualization.DataTable();
        data.addColumn('string', '');
        data.addColumn('number', 'Title');
        data.addColumn({type: 'number', role: 'annotation'});

        //Response to get dates and ranges
        data.addRows(testArray);

        var options = {
          'chartArea': {'width': '90%', 'height': '85%'},
          'legend': {'position': 'top', alignment: 'start'},
        };
        var chart = new google.charts.Bar(document.getElementById('barchart_material'));
        chart.draw(data, options);
      } //end google display function

Answer 1

我解决了这个问题。

在AJAX调用中，我放置了Google图表功能。

我用过

localStorage.setItem("jsonArray", JSON.stringify(testArray));

在我的test.asp页内

和ajax调用中使用的

 jsonArray = JSON.parse(localStorage.getItem("jsonArray"));

返回数组并在数据中使用它。

最终代码

function reportBuild(date1, date2, dataType){
  date2 = $("#dateRangeA").val();
  date1 = $("#dateRangeB").val();
  dataType = $("#dataType").val();

  var xhttp;
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("chartBuild").innerHTML = this.responseText;
    }
  }
  xhttp.open("GET", "test.asp?d1="+date1+"&d2="+date2+"&dataType="+dataType, true);
  xhttp.send();

jsonArray = JSON.parse(localStorage.getItem("jsonArray"));

google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(barchart_material);
      function barchart_material() {

        var data = new google.visualization.DataTable();
        data.addColumn('string', '');
        data.addColumn('number', 'OSAP');
        data.addColumn({type: 'number', role: 'annotation'});

        //Response to get dates and ranges
        data.addRows(jsonArray);

        var options = {
          'chartArea': {'width': '90%', 'height': '85%'},
          'legend': {'position': 'top', alignment: 'start'},
        };
        var chart = new google.charts.Bar(document.getElementById('barchart_material'));
        chart.draw(data, options);
      } //end google display function


}

Google图表未显示

1 个答案: