Question

下面是我用来调用绑定jqchart插件的Ajax请求的代码这里的问题是在Ajax调用响应之前调用了jqchart。

我需要帮助：

 $(document).ready(function () {
        var ajaxDataRenderer =
        function (url, plot, options) {
        var ret = null;
        $.ajax({
                type: "POST",
                async: false,
                url: url,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    ret = msg.d;

                },
                error: AjaxFailed
            });
            return ret;
        };            
        $('#jqChart').jqChart({
            series: [
                        {
                            type: 'line',
                            title: 'Series 1',
                            data: ajaxDataRenderer('TestService.asmx/getTotal')
                        }
                    ]
        });

        function AjaxFailed(result) {
            alert(result.status + ' ' + result.statusText);
        }
    });

我已将代码更改为，但仍无效：

<script lang="javascript" type="text/javascript">
    $(document).ready(function () {            
        $.ajax({
            type: "POST",
            async: false,
            url: "TestService.asmx/getTotal",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                alert(msg.d);
                $('#jqChart').jqChart({

                    series: [
                        {
                            type: 'line',
                            title: 'Series 1',
                            data: msg.d
                        }
                    ]
                });
            },
            error: AjaxFailed
        });

        function AjaxFailed(result) {
            alert(result.status + ' ' + result.statusText);
        }
    });
</script>

这是我从Ajax响应中返回的数据：

[['Jan',0],['Feb',0],['Mar',21],['Apr',0],['May',0],['Jun',0],['Jul',5],['Aug',0],['Sep',0],['Oct',0],['Nov',0],['Dec',0]]

//////////////////最后//////////////////////////// // 谢谢你的帮助，我发现从我的webmethod返回的数据格式不正确，即它是（[['jan'，62]，['feb'，60]，['mar'，68]，[ 'apr'，58]，['may'，52]，['jun'，60]，['jul'，48]，['aug'，62]，['sep'，60]，['oct '，68]，['nov'，58]，['dec'，100]]），

现在我已经改变了webmethod只返回数据点作为数组[即a [0] = 62，a [1] = 60 ....等等]并且没有月份我将月数设置为默认x轴值，我的代码如下。

<script lang="javascript" type="text/javascript">
    $(document).ready(function () {

        $.ajax({
            type: "POST",
            async: false,
            url: "TestService.asmx/getTotal",
            contentType: "application/json; charset=utf-8",
            dataType: "json",

            success: function (msg) {

                var c = [];
                var myarr = new Array();
                var j=0;
                for (var i = 0; i <= 11; ++i) {

                    c.push(msg.d[j + 1]);
                    j+=2;
                }

               $('#jqChart').jqChart({
                    axes: [
                    {
                        type: 'category',
                        location: 'bottom',
                        categories: ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul','aug','sep','oct','nov','dec']
                    }
                  ],
                    series: [
                        {
                            type: 'line',
                            title: 'Series 1',
                            data: c
                        }
                    ]
                });
            },
            error: AjaxFailed 
        });

        function AjaxFailed(result) {
            alert(result.status + ' ' + result.statusText);
        }
    });
</script>

/////////////////////////////////////////////// ////////////////////////////////////////////

嗨dragan，谢谢你提供的这些文件非常有帮助，我看到下面的这个片段你能不能让我知道我想通过 - [['jan'，20]，['feb'，10]，['mar'，25]，['jun'，26]，['jul'，15]]返回数据从我的ajax响应到下面代码段中的数据部分。

        $('#jqChart').jqChart({
          title: { text: 'Linear Axis' },
          axes: [
                  {
                      type: 'linear',
                      location: 'left',
                      minimum: 10,
                      maximum: 100,
                      interval: 10
                  }
               ],
          series: [{
                      type: 'column',
                      data: [['a', 70], ['b', 40], ['c', 85], 
                          ['d', 50], ['e', 25], ['f', 40]]
                  }]
      });

//////////////////////////////////////////////////////////////////////////////////////////

I have tried using as below, 
the msg is the array of length 24
 where msg.d[0] = 'jan' 
       msg.d[1] = 10 
       msg.d[2] = 'feb' 
       msg.d[3] = 20
             '
             '
             '
       msg.d[22] = 'dec'
       msg.d[23] = 50

//script is as below    



  var data = [];

    success:function(msg){

     var j=0;

     for (var i = 0; i <= 11; ++i) {
          data.push(msg.d[j],msg.d[j + 1]);
          j+=2;
     }

     $('#jqChart').jqChart({

         series: [
                    {
                        type: 'line',
                        title: 'Series 1',
                        data: data
                    }
                 ]
     });
}

The output i get is 

in y axis i get numbers from 1 to 100
& in x axis i get jan,feb,mar
the problem is there is no line graph only axis are displayed.

Answer 1

将jqChart移动到ajax

的成功回调中

$(document).ready(function () {
            $.ajax({
                type: "POST",
                async: false,
                url: url,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {                  
                   $('#jqChart').jqChart({
                       series: [
                        {
                            type: 'line',
                            title: 'Series 1',
                            data: msg.d
                        }
                    ]
                 });

                },
                error: AjaxFailed
            });
            return ret;
        };

        function AjaxFailed(result) {
            alert(result.status + ' ' + result.statusText);
        }
    });

Answer 2

在成功回调中移动jqChart是正确的方法。我只是尝试这种方法，它正在发挥作用。

如果你发给我（dragan.matek@jqchart.com）一个示例项目，我们可以更好地看看它。

Answer 3

试试这段代码：

var data = msg.d;
var chartData = [];

for (var i = 0; i < data.length; i += 2) {
    var item = [data[i], data[i + 1]];        
    chartData.push(item);
}

$('#jqChart').jqChart({

    series: [
                {
                    type: 'line',
                    title: 'Series 1',
                    data: chartData
                }
             ]
});

在返回ajax响应之前执行JQchart

3 个答案: