asp.NET MVC动态创建图表

Question

我需要帮助从先前从xml文件加载的数据动态创建图表。

查看：

using prvniAplikace.Models
@using Chart.Mvc.ComplexChart;
@using Chart.Mvc.Extensions

@{
    ViewBag.Title = "Index";
}

@using (Html.BeginForm("LoadFile", "Home", FormMethod.Post,
                                                     new { enctype = "multipart/form-data" }))
{

    <div class="form-group" align="left">
        <label for="exampleInputFile">Load File</label>
        <input type="file" accept=".tcx" class="form-control-file" name="exampleInputFile" id="exampleInputFile" aria-describedby="fileHelp">
    </div>

    <div class="form-group" align="left">
        <button class="btn btn-primary" type="submit" name="tlacitko">Display</button>
    </div>
}

控制器：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.IO;
using System.Data.Common;
using System.Xml;
using System.Text;
using System.Xml.Linq;
using System.Linq;
using System.Collections.Generic;
using System.Collections;
using System.Globalization;

namespace prvniAplikace.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult LoadFile(HttpPostedFileBase exampleInputFile)
        {


            if (exampleInputFile.ContentLength > 0)
            {
                var fileName = Path.GetFileName(exampleInputFile.FileName);
                var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);
                exampleInputFile.SaveAs(path);

                TempData["message-success"] = "Soubor byl nahran";

                string xmlFile = Server.MapPath(fileName);

                XmlDocument doc = new XmlDocument();
                doc.Load(path);
                XmlNodeList nodes = doc.GetElementsByTagName("HeartRateBpm");
                XmlNodeList nodes2 = doc.GetElementsByTagName("Time");

                List<int> hodnotyT = new List<int>();
                List<string> hodnotyCasu = new List<string>();

                foreach (XmlNode node in nodes)
                {
                    int hodnota = Int32.Parse(node["Value"].InnerText);
                    hodnotyT.Add(hodnota);
                }

                foreach (XmlNode node in nodes2)
                {
                    string value = node.ChildNodes[0].Value;
                    hodnotyCasu.Add(value);
                }

                List<DateTime> casy = new List<DateTime>();
                string format = "yyyy-MM-dd'T'HH:mm:ss'Z'";

                foreach (string value in hodnotyCasu)
                {
                    DateTime dt = DateTime.ParseExact(value, format, CultureInfo.InvariantCulture);
                    casy.Add(dt);
                }

                DateTime dt1 = casy[0];
                List<TimeSpan> casyGraf = new List<TimeSpan>();


                foreach  (DateTime date in casy)
                {
                    TimeSpan rozdil = date - dt1;
                    casyGraf.Add(rozdil);
                }

                List<string> casyGrafText = new List<string>();

                foreach (TimeSpan time in casyGraf)
                {
                    string casovac = time.ToString(@"hh\:mm\:ss");
                    casyGrafText.Add(casovac);
                }

                ViewBag.ListCasy = casyGrafText;
                ViewBag.ListTep = hodnotyT;

            }
            return RedirectToAction("Index");
        }
    }
}

到目前为止，我在控制器中有一个方法，我按下按钮即可调用。该方法是加载xml文件并处理数据。在我当前的输出中，我有两个数据列表，我需要显示当前网页下的数据的折线图。我现在正在使用图表chart.js。

我的观点，我想在其下方显示图表：enter image description here

关于我该怎么做的任何想法？