Рисование диаграммы в Asp. net Mvc с использованием модели - PullRequest
Новая
       54

Рисование диаграммы в Asp. net Mvc с использованием модели

1 голос
/ 28 апреля 2020

У меня есть таблица с именем "CourseEvaluation" и другая таблица, связанная с ней FK (CourseEvaluationQuestions), на каждый CourseEvaluationQuestions есть много ответов. я пытаюсь нарисовать диаграмму P ie для каждого CourseEvaluationQuestions в той же CourseEvaluation, используя плагин Chart. js в Visual Studio

У меня проблема, мой код не работает должным образом, можете мне помочь?

@ {var item = Model.CourseEvaluationQuestions.ToList ();}

@ foreach (var x in item) {

<div style="width: 600px;margin: 0px auto 40px;">
    <div class="chartjs-size-monitor">
        <div class="chartjs-size-monitor-expand">
            <div class=""></div>
        </div>
        <div class="chartjs-size-monitor-shrink">
            <div class=""></div>
        </div>
    </div>

    <div>
        <canvas class="myCanvas" style="display: block; width: 540px; height: 270px;" width="540" height="270"></canvas>
    </div>
</div>

}

@ section scripts {

    <script src="~/Content/Custom/js/Chart.min.js"></script>
<script src="~/Content/Custom/js/utils.js"></script>

    <script>

    var title;
    var data;
    var label;
    window.onload = function myfun() {
        var canvas = document.getElementsByClassName('myCanvas');
        for (var i = 0; i < canvas.length; i++) {
                     @{var d = item.OrderBy(y => Guid.NewGuid()).FirstOrDefault(); }
         title = '@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(d.Title))';
           data = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(d.CourseEvaluationAnswers.Select(x => x.CourseEvaluationStudentAnswers.Count())));
          label = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(d.CourseEvaluationAnswers.Select(x => x.Title)));

                  var config = {
                      type: 'doughnut',
                    data: {
                     datasets: [{
                    data: data,
                    backgroundColor: [
                    window.chartColors.red,
                    window.chartColors.orange,
                    window.chartColors.yellow,
                    window.chartColors.green,
                    window.chartColors.blue,

                ],
                label: 'الاجابات'

            }],
            labels:label

        },
        options: {
            responsive: true,
            legend: {
                position: 'top',
            },
            title: {
                display: true,
                text: title
            },
            animation: {
                animateScale: true,
                animateRotate: true
            }
        }
    };

            var context = canvas[i].getContext('2d');
        window.myDoughnut = new Chart(context, config);


        @item.Remove(d);
         }

         };
</script>

}

когда я запускаю его, появляется только один элемент, но на самом деле есть объект буксировки, который должен нарисовать, что не так в моем коде? Как я могу нарисовать свои графики?

изображение результата

...