使用d3js图表的mvc asp.net项目

问题描述

嘿，我试图用d3js库制作图表，但我不确定如何将数据库中的日期绑定到图表，这是我为控制器编写的代码：

[HttpGet]
        public ActionResult adminstat()
        {

            ICollection<Stat> mylist = new List<Stat>();
            var r = _context.Products.ToList()
                    .GroupBy(q => q.ProductType);

            foreach (var v in r)
            {
                mylist.Add(new Stat(v.Key,v.Count()));

            }

            ViewBag.data = mylist;

            ICollection<Stat> mylist2 = new List<Stat>();

            var productsSold = from p in _context.Products
                               from o in _context.Order
                               where o.OrderProducts.Any(op => op.ProductId == p.ProductId)
                               select p;

            var q = productsSold.ToList()
                .GroupBy(q => q.ProductName);

            foreach (var v in q)
            {
                mylist2.Add(new Stat(v.Key,v.Count()));

            }

            ViewBag.data2 = mylist2;

            return View();
        }

        [responsecache(Duration = 0,Location = responsecacheLocation.None,NoStore = true)]
        public IActionResult Error()
        {
            return View(new Errorviewmodel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
        }


        }
    }
public class Group<K,T>
{
    public K Key { get; set; }
    public IEnumerable<T> Values { get; set; }
}
public class Stat
{
    public string Key;
    public int Values;


    public Stat(string key,int values)
    {
        Key = key;
        Values = values;
    }
}

这是我得到的视图代码：

@{ ViewData["Title"] = "adminstat";
                Layout = "_Layout"; }
@using MuseBox_Web_Project.Controllers

<section id="home-adminstat" class="home-adminstat">
    <div class="container">

        <div class="section-title">
            <span>Statistics</span>
            <h2>Statistics</h2>
        </div>

        <!DOCTYPE html>
        <html>
        <head>
            <Meta name="description" content="d3 bar chart vertical bars">
            <Meta charset="utf-8">
            <Meta name="viewport" content="width=device-width">
            <title>JS Bin</title>
            <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
            <style>
                #barChart {
                    font-size: 14px;
                }

                .bar {
                    fill: steelblue;
                }

                    .bar:hover {
                        fill: brown;
                    }

                .axis path,.axis line {
                    fill: none;
                    stroke: #000;
                    shape-rendering: crispEdges;
                }

                .x.axis path {
                    display: none;
                }
            </style>
        </head>
        <body>
            <svg id="barChart"></svg>


            <script>

                var data = [
                   
                    {
                        Product: "Shoes",Count: 5
                    },{
                        Product: "Shirts",Count: 9
                    },{
                        Product: "Pants",Count: 3
                    },{
                        Product: "Ties",Count: 1
                    },{
                        Product: "Socks",Count: 7
                    },{
                        Product: "Jackets",Count: 2
                    }];


                var margin = {
                    top: 20,right: 20,bottom: 50,left: 40
                },width = 250 - margin.left - margin.right,height = 250 - margin.top - margin.bottom;


                var x = d3.scale.ordinal()
                    .rangeRoundBands([width,0],0.1);

                var y = d3.scale.linear()
                    .range([0,height]);

                var xAxis = d3.svg.axis()
                    .scale(x)
                    .orient("bottom");

                var yAxis = d3.svg.axis()
                    .scale(y)
                    .orient("left")
                    .tickFormat(d3.format("d"))
                    .tickSubdivide(0);


                var svg = d3.select("svg#barChart")
                    .attr("width",width + margin.left + margin.right)
                    .attr("height",height + margin.top + margin.bottom)
                    .append("g")
                    .attr("transform","translate(" + margin.left + "," + margin.top + ")");

                x.domain(data.map(function (d) {
                    return d.Product;
                }));

                y.domain([d3.max(data,function (d) {
                    return d.Count;
                }),0]);

                svg.append("g")
                    .attr("class","y axis")
                    .attr("transform","translate(0," + height + ")")
                    .call(xAxis)
                    .selectAll("text")
                    .attr("transform","rotate(90)")
                    .attr("x",0)
                    .attr("y",-6)
                    .attr("dx",".6em")
                    .style("text-anchor","start");

                svg.append("g")
                    .attr("class","y axis")
                    .call(yAxis);

                svg.selectAll(".bar")
                    .data(data)
                    .enter().append("rect")
                    .attr("class","bar")

                    .attr("x",function (d) {
                        return x(d.Product);
                    })
                    .attr("width",x.rangeBand())
                    .attr("y",function (d) {
                        return y(d.Count);
                    })
                    .attr("height",function (d) {
                        return height - y(d.Count);
                    });

            </script>
        </body>
    </html>

我希望能够使用我制作的控制器将其中的鞋子和衬衫以及所有这些硬编码的内容更改为数据库中的数据，希望得到一些帮助，我在这里很新

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

charts model-view-controller web-project