使用模型制作图表

时间:2015-10-03 07:27:53

标签: asp.net-mvc-4 charts

A具有以下模型

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;

namespace GoOnWork.Models
{
    public class Skill
    {
        [Key]
        public int Id { get; set; }

        public DateTime AddedOn { get; set; }

        public DateTime ModifiedOn { get; set; }

        public int? DescriptionId { get; set; }

        public virtual Description Descriptions { get; set; }

        public int? LevelId { get; set; }

        public virtual Level Levels { get; set; }

        public string UserId { get; set; }

        public virtual ApplicationUser User { get; set; }

    }
}

我想从技能模型中创建包含Level(xFields)和Description(yFields)的图表。 “描述”和“级别”字段与其他表连接。 我有一个图表视图模型

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Helpers;

namespace GoOnWork.Models
{
    public class ChartViewModel
    {
        public Chart Chart { get; set; }
    }
} 

我根据该视图模型编写了一个控制器。

public class ChartController : Controller
    {
        ApplicationDbContext db = new ApplicationDbContext();
        // GET: Chart
        public ActionResult Index()
        {
            var model = new ChartViewModel
            {
                Chart = GetChart()
            };
            return View(model);
        }
        private Chart GetChart()
        {
            var user = User.Identity.GetUserName();
            var data = db.Skills.Where(x => x.User.UserName == user);
            return new Chart(600, 400, ChartTheme.Blue)
                .AddTitle("Skills")
                .AddLegend()
                .DataBindTable(data, "LevelName")
                .AddSeries(
                    "Default",
                    chartType: "bar",
                    xValue: data, xField: "LevelName",
                    yValues: data, yFields: "DescriptionName"
                    );
        }
    }

索引()的视图

@model GoOnWork.Models.ChartViewModel
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <h2>Our Awesome Chart!</h2>
    @Model.Chart.Write(format: "png")
</body>
</html>

问题在于我不知道如何使用该字段创建图表。 或者如何修改GetChart()函数以使其正常工作。 如果有人可以帮助我,那就更好了。

0 个答案:

没有答案