JSON과 chart.js를 사용하여 도넛 형 차트 만들기

Question

분석 목적으로 chart.js를 처음 사용합니다. 나는 SQL 데이터베이스에서 JSON 데이터를 LINQ 람다 식을 사용하여 .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의 설명서를 읽고 그래프에 올바른 속성을 사용하고 있는지 확인하십시오.