Canvas js column chart не отображается из строки JSON

Question

Я пробовал это в canvas js, и у меня нет предыдущего опыта относительно этой проблемы. Попробуйте дать мне подсказку, чтобы исправить это.

У меня есть метод, который возвращает строку JSON, как показано ниже, и ее веб-службу asm.net asmx.

<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>

Я хочу, чтобы вставить эту х и у точек данных в гистограмму холста, так что я расслоение плотного установил вызов 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 принимает интеграл/значение с плавающей точкой, но не строковое значение для точек данных. Поэтому попробуйте проанализировать значение x, y для int/float, как показано ниже.

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