JSONとchart.jsを使用したドーナツチャートの作成

Question

analytics目的でchart.jsを初めて使用しています。私は、LINQラムダ式を使用してSQLデータベースからJSONデータを.NETプラットフォーム上のchart.jsに渡す方法に関する完全な解決策を探しています。しかし、私はそれについて良いチュートリアルを見つけることができませんでした。

• 背景

私は、JSONデータを渡されたドーナツグラフを作りたかったです。しかし、私は私のドーナツチャートでいくつかのヒップカップに遭遇しました。それは現れなかった。私の棒グラフ、スタックチャートは、私のドーナツチャート以外はすべて同じフォーマットで動作しています。私のドーナツは、LINQを使ってリレーショナルテーブルからデータを受け取ることができるはずです。以下は私のコードです。

$(window).load(function() { 
       //window.onload = function() { 
       $.ajax({ 
        type: "POST", 
        url: "Dashboard.aspx/getPieChartData", 
        data: "{}", 
        contentType: "application/json; charset=utf-8", 
        dataType: "json", 
        success: function (msg) { 
         var aData = msg.d; 

         var aLabels = aData[0]; 
         var aDatasets1 = aData[1]; 
         var aDatasets2 = aData[2]; 
         var aDatasets3 = aData[3]; 

         var options2 = { 
           showScale: false, 
           scaleShowGridLines: false, 
           scaleGridLineColor: "rgba(0,0,0,.05)", 
           scaleGridLineWidth: 0, 
           scaleShowHorizontalLines: false, 
           scaleShowVerticalLines: false, 
           bezierCurve: false, 
          <%-- multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>",--%> 
          bezierCurveTension: 0.4, 
          pointDot: false, 
          pointDotRadius: 0, 
          pointDotStrokeWidth: 2, 
          pointHitDetectionRadius: 20, 
          datasetStroke: true, 
          datasetStrokeWidth: 4, 
          datasetFill: true, 

         }; 


         var barChartData = { 
          labels: aLabels, 
          datasets: [ 

          { 
           value: aDatasets1, 
           color: "#00c396", 
           highlight: "#00c396" 
           //label: "Batch" 
          }, { 
           value: aDatasets2, 
           color: "#336E7B", 
           highlight: "#336E7B" 
           //label: "Dashboard" 
           } 
          , { 
           value: aDatasets3, 
           color: "#22A7F0", 
           highlight: "#22A7F0" 
           // label: "API" 
           } 

          ] 
         } 

         var ctx = document.getElementById("pie-chart").getContext("2d"); 
         window.myBar = new Chart(ctx).Doughnut(barChartData, options2, { responsive: true }); 


        } 
       }); 
      }); 


[WebMethod] 
     public static List<object> getPieChartData() 
     { 
      List<object> iData = new List<object>(); 

      List<string> labels = new List<string>(); 
      labels.Add("Batch"); 
      labels.Add("Dashboard"); 
      labels.Add("API"); 



      iData.Add(labels); 

      List<int> lst_dataItem_1 = new List<int>(); 
      lst_dataItem_1.Add(10); 
      //lst_dataItem_1.Add(8); 
      //lst_dataItem_1.Add(6); 
      //lst_dataItem_1.Add(4); 
      //lst_dataItem_1.Add(2); 

      iData.Add(lst_dataItem_1); 

      List<int> lst_dataItem_2 = new List<int>(); 
      lst_dataItem_2.Add(80); 
      //lst_dataItem_2.Add(365); 
      //lst_dataItem_2.Add(98); 

      iData.Add(lst_dataItem_2); 

      List<int> lst_dataItem_3 = new List<int>(); 
      lst_dataItem_3.Add(10); 
      //lst_dataItem_1.Add(8); 
      //lst_dataItem_1.Add(6); 
      //lst_dataItem_1.Add(4); 
      //lst_dataItem_1.Add(2); 

      iData.Add(lst_dataItem_3); 

      return iData; 
     } 


<div class="card-body no-padding" align="center"> 
     <canvas id="pie-chart" class="chart"></canvas> 
<div id="doughnutLegend"></div> 

Answer 1

私はさまざまな問題を抱えています。

$ .ajax呼び出しでは、データ属性でJSONの代わりに{{} "文字列を送信します。{}。

getPieChartData（）WebMethodでは、オブジェクトのリストを返しますが、JSONの有効な文字列を返さないでください。

http://www.chartjs.org/docs/#doughnut-pie-chartのドキュメントを読んで、グラフに正しい属性を使用しているかどうかを確認してください。