如何使用Chart.js构建动态图表

Question

我正在使用实体框架核心从.net核心中的SQL Server数据库中获取信息。检索值后，我想动态建立我的PIE CHART，但它没有显示，并且Chrome控制台中没有错误。请在下面查看我的尝试。...谢谢。

    @{ var ctx1 = new WebookContext();
        var GuestHouseIncome =
        from ghouse in ctx1.RoomAcceptRequest
        where (ghouse.Hubid == CurrUser.HubId)
        group ghouse by ghouse.GuesthouseName into ghouseGroup
        select new
        {
            Guesthouse = ghouseGroup.Key,
            TotalScore = ghouseGroup.Sum(x => x.Total),
        };
        ArrayList Mylabels = new ArrayList();
        ArrayList MyData = new ArrayList();
        foreach (var item in GuestHouseIncome)
        {
            Mylabels.Add(@"" + item.Guesthouse + "").ToString();
            MyData.Add(item.TotalScore);
        }

    }


    <script>

  new Chart(document.getElementById("pie-chart"), {
    type: 'pie',
    data: {
        labels: [@Mylabels],
      datasets: [{
        label: "Guesthouse Ratios",
        backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
        data: [@MyData]
      }]
    },
    options: {
      title: {
        display: true,
        text: 'Guesthouse income ratios'
      }
    }
});

    function addData(chart, label, data) {
        chart.data.labels.push(@Mylabels);
        chart.data.datasets.forEach((dataset) => {
            dataset.data.push(@MyData);
        });
        chart.update();
    }


    </script>`

Answer 1

我的DATA和LABELS变量都需要以@ Html.Raw（）作为前缀，这很简单，但花了我一生的时间才知道@ Html.Raw :(