1

下面是我用于调用 Ajax 请求以绑定 jqchart 插件的代码。
这里的问题是在 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 仅将数据点返回为数组 [ie a[0]=62,a[1]=60....so on] 并且没有月份，我将月份设置为默认 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.
4

3 回答 3

2

在ajax的成功回调中移动jqChart

$(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);
        }
    });
于 2011-11-13T15:08:09.190 回答
0

在成功回调中移动 jqChart 是正确的方法。我只是在尝试这种方法并且它正在工作。

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

于 2011-11-13T16:44:15.473 回答
0

试试这个代码片段：

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
                }
             ]
});
于 2011-11-15T16:23:42.020 回答