如何使用ASP.NET MVC中的chart.js添加动态数据集

时间:2018-02-04 10:08:58

标签: javascript asp.net-mvc charts chart.js pie-chart

我正在尝试从我的数据库中为每个问题显示一个饼图。现在,我只能在第一个问题上显示一个图表。

我不知道如何显示其余问题的图表。我也不确定我是否正确地做到了这一点?我目前正在使用ViewBag从控制器传递数据。我该怎么做呢?

请帮帮我。感谢。

这是我的观点:

<table class="table">
                    <tr>
                        <th>
                            Questions
                        </th>
                    </tr>
                    @foreach (var question in (List<Testv3.Models.MyViewModel>)ViewData["questionlist"])
                    {
                        <tr>
                            <td>
                                @question.Question
                                <br />
                                <div class="chart">
                                    <canvas id="pie-chart"></canvas>
                                </div>
                            </td>
                        </tr>
                    }
</table>

@section Scripts {
<script type="text/javascript">

    var PieChartData =
        {
            labels: ["Agree", "Somewhat Agree", "Disagree"],
            datasets: [{
                label: 'Overall report',
                backgroundColor: [
                    "#f990a7",
                    "#aad2ed",
                    "#9966FF",
                ],
                borderWidth: 2,
                data: [@ViewBag.countAgree, @ViewBag.countSomewhatAgree, @ViewBag.countDisagree]
            }]
        };

        window.onload = function () {
            var ctx1 = document.getElementById("pie-chart").getContext("2d");
            window.myBar = new Chart(ctx1,
                {
                    type: 'pie',
                    data: PieChartData,
                    options:
                        {
                            responsive: true,
                            maintainAspectRatio: true
                        }
                });
        }

</script>

这是我的控制者:

            List<PsychTestViewModel> questionlist = new List<PsychTestViewModel>();
            var datalistQuestions = db.Questions.ToList();

            foreach (var question in datalistQuestions)
            {
                PsychTestViewModel ptvm = new PsychTestViewModel();
                ptvm.QuestionID = question.QuestionID;
                ptvm.Question = question.Question;
                questionlist.Add(ptvm);

                ViewBag.questionlist = questionlist;

                var agree = from ans in db.Answers
                            where ans.Answer == 1 && ans.QuestionID == ptvm.QuestionID
                            select new { Answer = ans.Answer };


                var somewhatAgree = from ans in db.Answers
                                    where ans.Answer == 2 && ans.QuestionID == ptvm.QuestionID
                                    select new { Answer = ans.Answer };


                var disagree = from ans in db.Answers
                               where ans.Answer == 3 && ans.QuestionID == ptvm.QuestionID
                               select new { Answer = ans.Answer };

                int Agree = agree.Count();
                int SomewhatAgree = somewhatAgree.Count();
                int Disagree = disagree.Count();

                ViewBag.countSomewhatAgree = SomewhatAgree;
                ViewBag.countAgree = Agree;
                ViewBag.countDisagree = Disagree;
            }

0 个答案:

没有答案