Question

我正在尝试使用Visual Studio中的插件Chart.js绘制条形图。这是我的Model类：

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

你的第一个问题是错误拼写＆＃34;类型＆＃34;在Chart对象中。（＆＃34; typre＆＃34）

第二个是，您想要绘制哪些数据？您将数据设置为对象集合，而不是值。也许是这样的？

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;

使用Chart.js在Asp.net Mvc中绘制图表

1 个答案: