使用 JSON 和 chart.js 创建圆环图

Question

这是我第一次使用 chart.js 进行分析。我一直在寻找有关如何使用 LINQ Lambda 表达式将 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 的文档以检查您是否在图表上使用了正确的属性。