2016-10-29 6 views
0

キャンバスjsでこれを試しましたが、この問題に関する以前の経験はありません。これを修正するヒントを教えてください。キャンバスjsの縦棒グラフがJSON文字列からレンダリングされない

以下のようなJSON文字列をasp.net asmx Webサービスで返すメソッドがあります。私は

$.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(); 
 

 
       } 
 
      });
以下のように私のASMX asp.netサービスメソッドへのAJAX呼び出しを設定しているので、私のキャンバスのjs棒グラフに、このxとyのデータポイントを挿入したい

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

成功の機能とデータの内部で起こって

そのフルFiのですJSON Stringを返すようになった。

まだグラフが正しく表示されません。ヒントや助け?

Graph is not rendering still

答えて

0

CanvasJS dataPointsのための一体/ float値ではなく、文字列値を受け入れます。ですから、以下のようにx、yの値をint/floatに解析してみてください。

dataPoints.push({ x: parseInt(data[i].x), y: parseFloat(data[i].y) }); 
関連する問題