需要将来自 Web 服务的数据显示为 jquery 中的图表数据点

Question

我有一个 jquery 图表，其中有这样的数据点：

 var chart = new CanvasJS.Chart("chartContainer",
                        {
                            title: {
                                text: "MONTHLY STATISTICS"
                            },
                            axisX: {
                                title: "Axis X Title"
                            },
                            axisY: {
                                title: "Total Number"
                            },

                            data: [
                            {
                                type: "column",

                                dataPoints: [ 
                    { x: 10, y: 6, label:"Apple"},
                    { x: 20, y: 2, label:"Mango"},
                    { x: 30, y: 5, label:"Orange"},
                    { x: 40, y: 7, label:"Banana"},
                    { x: 50, y: 1, label:"PineApple"},
                    { x: 60, y: 5, label:"Pears"},    
                    { x: 70, y: 5, label:"Grapes"},
                    { x: 80, y: 2, label:"Lychee"},
                    { x: 80, y: 2, label:"Jackfruit"}


                                ]
                            }
                            ]
                        });

                        chart.render();

我有一个网络服务，我在其中获取 json 格式数据，并将其存储在图表数据点 format.Code 中的字符串变量 s 中，用于从网络服务接收数据，并且将其转换为图表数据点格式如下：

 success: function(datas)
                {
                    var points = datas.d;
                    var s = "";
                    $.each(points, function (index, Info) {

                        s = s + "{x:" + Info.x + ", y:" + Info.y + ", label:\"" + Info.label + "\"},";


                    });

现在我面临的问题是，当我将字符串 's' 作为数据点值时，它不起作用。我的完整代码是这样的：

<script type="text/javascript">
    $(document).ready(function () {
        var dataSent = "{roll:" + 1 + ",name:\"" + "Mubashir\"}";
        $.ajax({

            type: "Post",
            url: "WebServices.aspx/LoadStatistics",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(datas)
            {
                var points = datas.d;
                var s = "";
                $.each(points, function (index, Info) {

                    s = s + "{x:" + Info.x + ", y:" + Info.y + ", label:\"" + Info.label + "\"},";


                });


                    var chart = new CanvasJS.Chart("chartContainer",
                    {
                        title: {
                            text: "MONTHLY STATISTICS"
                        },
                        axisX: {
                            title: "Axis X Title"
                        },
                        axisY: {
                            title: "Total Number"
                        },

                        data: [
                        {
                            type: "column",

                            dataPoints: [ 

                          s

                            ]
                        }
                        ]
                    });

                    chart.render();



        }
            ,


            failure: function (msg) {
                alert(msg.d);

                $("#LoginRecords").text('No information Available!');

            }




        });


    });





</script>
<script src="tabs/js/canvasjs.min.js"></script>

如果我删除 s 变量并插入虚拟数据点，它就可以正常工作。现在我最后的问题是如何使用来自网络服务的数据作为图表数据点。

Answer 1

试试这个： "dataPoints: jQuery.parseJSON(s)"

dataPoints 预期的 json 对象数组，在您的代码中 "s" 是字符串，因此请先转换为 Json 对象，它将起作用

Answer 2

您尝试从服务器响应中创建一个字符串。要遍历服务器响应，您需要解析 JSON.

尝试这样的事情：

var yourDataPoints = [];
$.each(points, function (index, Info) {
    yourDataPoints.push({
        x: Info.x,
        y: Info.y,
        label: Info.label
    });
});

稍后分配您的 yourDataPoints 数组。

data: [
    { 
        type: 'column',
        dataPoints: yourDataPoints
    }
]

需要将来自 Web 服务的数据显示为 jquery 中的图表数据点

Need to display data coming from web service as chart data points in jquery

jquery

json

web-services

charts