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

Question

Я пытаюсь нарисовать гистограмму с помощью плагина Chart.js в Visual Studio.Это мой класс модели:

public class ProductReportDTO
{
    public string productid { set; get; }
    public string productname { set; get; }
    public int totalsold { set; get; }
    public int totalrevenue { set; get; }
}

мой контроллер:

        for (int i = 0; i < results.ToList().Count(); i++)
        {
            prdto.Add(new ProductReportDTO
            {
                productid = results[i].pro,
                productname = results[i].name,
                totalsold = results[i].quantity,
                totalrevenue = results[i].quantity * results[i].price
            });

        };
        var proName = prdto.Select(x => x.productname).Distinct();
        ViewBag.ProName = proName;
        ViewBag.Prdto = prdto.ToList();

и это мой Vew:

                    <div class="chart-container">
                        <canvas id="bar-chart"></canvas>
                    </div>

                        <script>
                            var repArray = @Html.Raw(Json.Encode(ViewBag.Prdto));
                            var proname = @Html.Raw(Json.Encode(ViewBag.ProName));

                            var ctx = $("#bar-chart");
                            var barchart = new Chart(ctx, {
                                typre: 'horizontalBar' ,
                                data: {
                                    labels: proname,
                                    datasets: [{
                                        label: "Report Chart",
                                        data: repArray,
                                    }]
                                },

                                options: {
                                    maintainAspectRatio: false,
                                    scales: { xAxes: [{ ticks: { beginAtZero: true } }] },
                                    legend: { display: false },
                                }
                            });
                        </script>

, но после этого они не отображают никакой диаграммыпо-моему. Каждый может помочь мне найти мою ошибку?Я исправлю это!

Answer 1

Ваша первая проблема - неправильное написание слова "type" в объекте Chart.("typre")

Во-вторых, какие данные вы хотите отобразить?Вы устанавливаете данные для коллекции объектов, а не значений.Может быть как то так?

var proName = prdto.Select(x => x.productname).Distinct();
ViewBag.ProName = proName;
// ViewBag.Prdto = prdto.ToList();
var data = prdto.GroupBy(x => x.productname).Select(group => group.Sum(item => item.totalsold));
ViewBag.Prdto = data;