c# - 如何从 Model MVC 中的数据中绘制图表？

Question

对于我想构建一些功能的项目，我需要在网页上有一个带有图表的视图。

我的项目是一个使用实体框架的 MVC ASP.net c#。 所有部分都已成功创建，因此这里没有重大错误。我已经尝试使用 C3.js（此链接：https ://www.c-sharpcorner.com/article/asp-net-mvc5-generate-bar-chart-using-javascript-c3-chart-library-and- entity-f/）并阅读了很多有关其他机会的信息，例如 Google Chart 、 Charts .js 等，但我真的很想使用 C3.js 。

我不完全理解所有代码，所以我尝试调整它但没有图表:(（视图成功启动但什么都没有）

对于我要渲染的表，这里是 sql 创建代码：

USE [garagenew]
GO

/****** Object:  Table [dbo].[Fuel]    Script Date: 17-04-19 13:07:23 ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[Fuel](
    [RECID] [int] IDENTITY(1,1) NOT NULL,
    [FichePrise] [int] NOT NULL,
    [DatePrise] [datetime] NULL,
    [UserName] [nvarchar](255) NULL,
    [VehicleId] [nvarchar](13) NULL,
    [BadgeNumber] [nvarchar](50) NULL,
    [Kilometer] [float] NULL,
    [Hour] [int] NULL,
    [Volume] [float] NULL,
    [CuveName] [nvarchar](250) NULL,
    [BornName] [nvarchar](250) NULL,
    [ProductName] [nvarchar](250) NULL,
    [Source] [nvarchar](20) NULL,
    [RUNDATE] [date] NULL,
 CONSTRAINT [PK_Fuel] PRIMARY KEY CLUSTERED 
(
    [RECID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO

我试过这个控制器：

    using ConsulFru.Models;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    namespace ConsulFru.Controllers
    {
        public class ChartController : Controller
        {
            // GET: Chart  
            public ActionResult Index()
            {
                return View();
            }
            public ActionResult BarChart()
            {
                bdfru entities = new bdfru();
                return Json(entities.Fuel.ToList(), JsonRequestBehavior.AllowGet);
            }
        }
    }

这个观点：

    @{
        ViewBag.Title = "Index";
    }
    <br />
    <div id="Barchart"></div>

    <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                type: "GET",
                url: "/Chart/BarChart",
                data: {},
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    successFunc(response);
                },
            });

            function successFunc(jsondata) {
                var chart = c3.generate({
                    bindto: '#Barchart',
                    data: {
                        json: jsondata,
                        keys: {
                            value: ['BadgeNumber','Kilometer'],
                        },
                        columns: ['BadgeNumber', 'Kilometer'],
                        type: 'bar',
                        groups: [
                            ['BadgeNumber', 'Kilometer'],
                        ]
                    },
                    color: {
                        pattern: ['#1f77b4', '#aec7e8', '#ff7f0e', '#ffbb78', '#2ca02c', '#98df8a', '#d62728', '#ff9896', '#9467bd', '#c5b0d5', '#8c564b', '#c49c94', '#e377c2', '#f7b6d2', '#7f7f7f', '#c7c7c7', '#bcbd22', '#dbdb8d', '#17becf', '#9edae5']
                    },
                });
            }
        });

    </script>

我希望先用这张表画一些图表，然后调整代码，这样我就可以用我想要的任何东西来做。

有人能帮我吗？

标签： c#asp.net-mvcentity-framework