D3.js 使用d3js图表的mvc asp.net项目
嘿，我正在尝试使用d3js库制作图表，我不确定如何将数据库中的日期绑定到图表这是我为控制器编写的代码：D3.js 使用d3js图表的mvc asp.net项目,d3.js,model-view-controller,charts,web-project,D3.js,Model View Controller,Charts,Web Project,嘿，我正在尝试使用d3js库制作图表，我不确定如何将数据库中的日期绑定到图表这是我为控制器编写的代码： [HttpGet] public ActionResult adminstat() { ICollection<Stat> mylist = new List<Stat>(); var r = _context.Products.ToList() .
[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>