如何解决使用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 举报,一经查实,本站将立刻删除。