Question

我在stackoverflow上已经阅读了很多文章和问题，但大多数都是关于使用DataTable的。但是，据我所知，asp.net CORE中没有DataTable。我还是很陌生，并且不知道使用什么替代品而不是DataTable。 Google Charts与硬编码值完美配合，但如何使用我数据库中的实际数据来处理它是我的理解结束的地方。

有人可以请我详细介绍一下如何做到这一点，以便我能更好地理解它吗？我非常感谢并提前感谢！

我使用了这里的信息和代码示例：

但是，最有可能的是，我从不同的答案中得到了混淆和混合的建议。在chart_script.js的评论中，有一个非常好的硬编码。

如果需要任何其他信息，请告诉我，我会尝试将其添加到问题中。

型号：

namespace MealProject.Models
{
    public partial class MealQuantity
    {
        public int MealQuantityId { get; set; }
        public int InitialQuantity { get; set; }
        public int RemainingQuantity { get; set; }
    }
}

控制器：

namespace MealProject.Controllers
{
    [Authorize]
    public class MainController : Controller
    {
        private DBContext _db;

        public MainController(DBContext context)
        {
            _db = context;
            if (User != null && AccountController.AdminConnect(_db, User.Claims.FirstOrDefault().Type, User.Claims.FirstOrDefault().Value).Result) { }
        }


[Route("/Chart")]
public IActionResult Chart()
{
    return View();
}

public IActionResult GetChart()
        {
            return Json(_db.MealQuantity
                .Select(p =>new {p.MealQuantityId, p.InitialQuantity, p.RemainingQuantity }));
        }

查看：

@* Maybe we should try System.Windows.Forms.DataVisualization.Charting ?
    or https://dotnethighcharts.codeplex.com/
    or https://gionkunz.github.io/chartist-js/index.html
*@
<strong>Hope this works</strong>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="~/scripts/chart_script.js"></script>
<div id="chart_div"></div>

的DbContext：

namespace MealProject.Models
{
    public partial class DBContext : DbContext
    {
        public DBContext(DbContextOptions<DBContext> options) : base(options) { }
        public virtual DbSet<MealQuantity> MealQuantity { get; set; }
        public virtual DbSet<Users> Users { get; set; }

    }
}

chart_script.js：

google.charts.load('current', { packages: ['corechart', 'line'] });
google.charts.setOnLoadCallback(drawLineColors);
function drawLineColors() {

    var data = new google.visualization.DataTable();

    data.addColumn('number', '@Model.MealQuantityId');
    data.addColumn('number', '@Model.InitialQuantity');
    data.addColumn('number', '@Model.RemainingQuantity');

    $.getJSON("@Url.Action('GetChart')", null, function (chartData) {
        $.each(chartData, function (i, item) {
            data.addRow(item.MealQuantity, item.InitialQuantity, item.RemainingQuantity);
        });


        var options = {
            title: 'Chart',
            hAxis: { title: '@Model.Chart', titleTextStyle: { color: 'red' } }
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    });
}

如何使用没有DataTable的数据库中的数据填充Google Charts

0 个答案: