javascript - Ajax 调用服务器并将数据传递回 Charts.js

Question

好吧，我几乎阅读了这里关于 ajax、php 的所有帖子以及我能找到的所有内容。我想做的是

获取我从数据库中提取的数组并将其放入图表.js 脚本中。我知道在 Firebug 中检查后我正确地提取了数据。它很好地穿过标题。我的问题是，一旦我取回它，我想要 a) 将其放入变量中或 2) 只需替换 Chart.js 脚本中的数据集。

我将粘贴脚本并提供尽可能多的指导。

var cigarData = $.ajax({
    data: {cigar: sCigar, calc: "cigar"},
type: "POST",
url: "http://www.blah",
dataType:"json",
async: false,
success:function(data) {
// This outputs the result of the ajax request
   console.log(data);

     }


}).responseText;    





                  var radarChartData = {
                    labels : ["Caramel","Creamy","Earthy","Floral","Fruity","Spicy","Sweet","Woody"],
                    datasets : [
                        {
                            fillColor : "rgba(228,154,7,0.5)",
                            strokeColor : "rgba(228,154,7,1)",
                            pointColor : "rgba(228,154,7,1)",
                            pointStrokeColor : "#fff",
                            data : [cigarData]//Where I want the data to be 
                        }

                        ] 

任何帮助都会很棒。我很感激大家。我将在上午回来回答出现的任何问题。

我已经编辑了我的代码，答案如下:

          $('#cigar').change(function (event) {


                var sCigar = $("#cigar").val();

                var cigarData = $.ajax({
                data: {cigar: sCigar, calc: "cigar"},
                type: "POST",
                url: "http://www.blah.com",
                dataType:"json",
                async: false,
                success:function(data) {

                //update chart here
                updateChartData(data);

                 }


                }).responseText;    



    //wrap chart refresh code as function

    function  updateChartData(data){

           var cigarData=data;

              var radarChartData = {
                labels : ["Caramel","Creamy","Earthy","Floral","Fruity","Spicy","Sweet","Woody"],
                datasets : [
                    {
                        fillColor : "rgba(228,154,7,0.5)",
                        strokeColor : "rgba(228,154,7,1)",
                        pointColor : "rgba(228,154,7,1)",
                        pointStrokeColor : "#fff",
                        data : [cigarData]  //Where I want the data to be 
                    }

                    ] 


              }

              };

                var myRadar = new Chart(document.getElementById("cigarCanvas").getContext("2d")).Radar(radarChartData,{scaleShowLabels : false, pointLabelFontSize : 10});


            });                                            

            });

现在每次都会重新绘制 map ，但数据点没有改变。就像它不断将相同的数据集拉入 map 中一样。我正在查看标题，每次更改选择时它都会传递不同的信息，但它不会将其放入 [cigarData] 中。有什么我完全想念的东西吗？ var myRadar 是否需要位于其上方的函数内部才能正确提取数据？我只是不确定每个函数需要在哪里正确地通过它们传递信息的确切布局。感谢迄今为止提供的所有帮助，你们非常棒。

Answer 1

Ajax 调用是异步的，这意味着回调是在从服务器收到响应后执行的，而不是按代码编写的顺序执行。

这应该是正确的做法。

var cigarData = $.ajax({
    data: {cigar: sCigar, calc: "cigar"},
type: "POST",
url: "http://www.blah",
dataType:"json",
async: false,
success:function(data) {

//update chart here
updateChartData(data);

 }


}).responseText;    



        //wrap chart refresh code as function

        function  updateChartData(data){

               var cigarData=data;

                  var radarChartData = {
                    labels : ["Caramel","Creamy","Earthy","Floral","Fruity","Spicy","Sweet","Woody"],
                    datasets : [
                        {
                            fillColor : "rgba(228,154,7,0.5)",
                            strokeColor : "rgba(228,154,7,1)",
                            pointColor : "rgba(228,154,7,1)",
                            pointStrokeColor : "#fff",
                            data : [cigarData]  //Where I want the data to be 
                        }

                        ] 


          }