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数据点插入到我的canvas js条形图中，所以我设置了一个ajax调用我的asmx asp.net服务方法，如下所示

$.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接受整数/浮点值，但不接受dataPoints的字符串值。因此，尝试将x，y值解析为int / float，如下所示。

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