Canvas js柱形图未从JSON字符串呈现

Question

我已经在 canvas js 中尝试过这个，我以前没有关于这个问题的经验。请给我一个提示来解决这个问题。

我有一个返回 JSON 字符串的方法，如下所示，它在 asp.net asmx Web 服务中。

<string xmlns="http://tempuri.org/">
[{"x":1,"y":11.211000000000004},{"x":2,"y":2.9419999999999984},{"x":3,"y":-1.125},{"x":4,"y":2.7779999999999987},{"x":5,"y":-12.715000000000002},{"x":6,"y":12.482},{"x":7,"y":19.523000000000003},{"x":8,"y":-2.3674999999999997},{"x":9,"y":1.7780000000000005},{"x":10,"y":15.724},{"x":11,"y":40.994}]
</string>

我想将此 x 和 y 数据点插入到我的画布 js 条形图中，因此我设置了对我的 asmx asp.net 服务方法的 ajax 调用，如下所示

$.ajax({
                type: 'POST',
                url:  'Services/ForecastingMainControllerService.asmx/CalculateLeavingGraph',
                dataType: 'json',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    var dataPoints = [];
                    
                    for (var i = 0; i <data.length; i++) {
                   
                        dataPoints.push({ x: data[i].x, y: data[i].y });
                    }
                 

                        var chart = new CanvasJS.Chart("chartContainer", {
                            axisX: {
                                title: "User IDs",
                            },
                            axisY: {
                                title: "Years",
                                
                            },
                        title: {
                            text: ""
                        },

                        data: [{
                            type: "column",
                            dataPoints: dataPoints
                        },

                        ]
                    });

                    chart.render();

                }
            });

它在成功函数内部，数据被返回的 JSON 字符串填充。

但图形仍然无法正确呈现。任何提示或帮助？

Answer 1

CanvasJS 接受整数/浮点值但不接受数据点的字符串值。所以尝试将 x, y 值解析为 int/float，如下所示。

dataPoints.push({ x: parseInt(data[i].x), y: parseFloat(data[i].y) });