图表不显示 ASP.NET MVC

问题描述 投票:0回答:0

我仍然是 ASP.NET MVC 的初学者,我为我的一个模型创建了图表并且它起作用了;当我对同一个项目中的另一个模型尝试相同的方法时,它没有用。

控制器(DowntimeController)

using ASPNETPFE.Data;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore.Metadata.Internal;
using System.Linq;
using System.Text.RegularExpressions;
using ASPNETPFE.Models.Domain;

namespace ASPNETPFE.Controllers
{
    //for register
    [Authorize]
    //
    public class DowntimeController : Controller
    {
        private readonly MVCDemoDbContext _context;  //_context and context were both simply dbContext 

        public DowntimeController(MVCDemoDbContext context)
        {
            this._context = context;
        }

        public IActionResult IndexDowntime()
        {
            var result = _context.Trss
                .GroupBy(x => x.Reason)
                .Select(s => new DowntimeOccurence
                {
                    DowntimeSum = s.Sum(d => d.Downtime),

                    Reason = s.Key,
                    Occurence = s.Count()
                })
                .OrderByDescending(g => g.DowntimeSum)
                .ToList();

            return View(result);
        }


        //////for the chart
        public IActionResult ShowDdata()
        {
            return View();
        }

        [HttpPost]
        public List<object> GetDdata()
        {
            List<object> data = new List<object>();

            List<string> labels = _context.Downtime.Select(p => p.Reason).ToList();
            data.Add(labels);

            List<int> values = _context.Downtime.Select(p => p.Occurence).ToList();
            data.Add(values);

            return data;
        }

    }
}

模型:(DowntimeOccurence)

using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

public class DowntimeOccurence
{
    //
    [Key]    
    public int Idd { get; set; }  ///for the charts of downtime
    //

    public int DowntimeSum { get; set; }
    public string Reason { get; set; }
    public int Occurence { get; set; }
}

视图(Showddata)

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<!--<input id="ID" value="Show Graph" type="button" />-->
<!--where we select the type of graph we want-->
<p>
    <div class="row">
        <div class="col-1">
            <label><b>Chart-Type</b></label>
        </div>
        <div class="col-2">
            <select id="ChartType" class="form-control" style="width:150px;">
                <option selected>--Select Chart Type--</option>
                <option>bar</option>
                <option>line</option>
                <!--<option>doughnut</option>-->
            </select>
        </div>
        <div class="col-4">
            <input id="ID" value="Show Graph" type="button" />
        </div>
    </div>
</p>


<br />

<div id="ChartView">
    <!--we created a canvas and it gets refreshed automatically with every click inside the div-->
    <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>          <!--the chart.js reference-->

<script type="text/javascript">

    $(function () {
        $("#ID").click(function () {

            var chartType = $("#ChartType").val();
            var chartView = document.getElementById('ChartView');

            chartView.innerHTML = '&nbsp;';
            $('#ChartView').append('<canvas id="myChart" style="max-width:750px;max-height:400px;"><canvas>');


            $.ajax({                                       //ajax method to fetch the data from the db
                type: "POST",
                url: "/Trss/GetData",
                data: "",
                contextType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccessResult,
                error: OnError
            });

            function OnSuccessResult(data) {

                var _data = data;
                var _chartLabels = _data[0].map(d => new Date(d).toLocaleDateString() + ' ' + new Date(d).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }));;
                var _chartData = _data[1];


                var barColor = ["blue", "purple", "orange", "brown", "green", "red"];

                new Chart("myChart",                   //this is where we generate the graph
                    {
                        type: chartType,
                        data: {
                            labels: _chartLabels,                           
                            datasets: [{
                                backgroundColor: barColor,
                                data: _chartData
                            }]
                        }
                    });

            }

            function OnError(err) {

            }

        });
    });

</script>

有人可以帮我吗?

我试图寻找解决方案,但无济于事。

c# html asp.net-mvc chart.js asp.net-ajax
© www.soinside.com 2019 - 2024. All rights reserved.