发出 ajax 请求时无法使用 amcharts 加载图表

Question

我正在使用 amcharts 制作饼图。在单击按钮时，我正在发出 AJAX 请求以从 mysql 获取数据。我正在获取 JSON 格式的数据。

收到 JSON 数组后，我将数据传递给 amcharts，但它没有显示。但是，如果我重定向到新的 jsp 页面，那么图表就会显示出来。

我的HTML代码是：

<input type="submit" class="btn btn-success" name="shift" value="shift analysis" onclick="shift(a,b,c,d)">
<div id="chartdiv1" style="width: 640px; height: 400px;"></div>

var chart = AmCharts.makeChart("chartdiv1", {
       "type": "pie",
       "theme": "light",
      
       "valueField": "f2",
       "titleField": "t",
        "balloon":{
        "fixedPosition":true
       },
       "export": {
         "enabled": true
       }
     } );
       
    
    
    
    function shift(a,b,c,d)
     {
       var ajax_req =new XMLHttpRequest();
       var method = "GET";
       var url ="endpoint";
       var asynchronous = true;
       
       ajax_req.open(method, url, asynchronous);
       ajax_req.send();
       
       ajax_req.onreadystatechange = function()
            {
          if (this.readyState == 4 && this.status == 200) 
               {
           // document.getElementById("json").innerHTML = this.responseText;
           
          var result= this.responseText;
           alert(result);
                chart.dataProvider =result;
          chart.validateNow();
    
               }
         }
      }

为了更好地理解这是我的 AJAX 请求的输出：结果：[{"t":"01:11","f2":340},{"t":"01:11","f2":335},{"t":"01:09","f2":334}]

Answer 1

即使您在 XMLHttpRequest 回调中返回 JSON 响应，responseText 是 字符串类型 （您可以确认这通过在调试器中执行 typeof this.responseText 来实现）。在将响应分配给 dataProvider 之前，您需要手动将响应转换为 JavaScript 数组。您可以使用 JSON.parse:

chart.dataProvider = JSON.parse(result);

如果您省略第一个参数并且通常用于更新视觉属性，请确保默认情况下调用 validateData to update the chart. validateNow 会跳过数据验证。

Demo using jsfiddle echo

发出 ajax 请求时无法使用 amcharts 加载图表

Not able to load chart using amcharts when making an ajax request

javascript

ajax

amcharts