Sql server 无法在Asp.net MVC中获取条形图

我试图在ASP.NET MVC中获取条形图，但它没有显示

我必须在X轴显示区域，在Y轴显示计数。在X轴上，每个区域有2个条形图

一个是接收计数，一个是发送计数

我使用了一个存储过程来获取图表数据

我的应用程序有以下几层

模型 看法 控制器和数据访问层 这是存储过程：

    @month int = 0,
    @year int = 0,
    @regionid int = null,
    @fromDate datetime = null,
    @toDate datetime = null
AS
BEGIN
    IF OBJECT_ID('tempdb..#tempRegionalReport') IS NOT NULL
        DROP TABLE #tempRegionalReport

    CREATE TABLE #tempRegionalReport
    (
        REGION_ID         int,
        REGION_NAME       varchar(250),
        Received_Request  int default 0,
        Delivered_Request int default 0
    )

    INSERT INTO #tempRegionalReport (REGION_ID, REGION_NAME, Received_Request, Delivered_Request)
        SELECT
            RELEASE_MANAGEMENT_TRAN.REGION_ID, 
            REGION_NAME,
            COUNT(FLOW_TRANSACTION.RM_ID), 0
        FROM
            FLOW_TRANSACTION 
        INNER JOIN 
            RELEASE_MANAGEMENT_TRAN ON RELEASE_MANAGEMENT_TRAN.RM_ID = FLOW_TRANSACTION.RM_ID 
        INNER JOIN 
            REGION_MASTER ON RELEASE_MANAGEMENT_TRAN.REGION_ID = REGION_MASTER.REGION_ID 
        INNER JOIN 
            CLIENT_MASTER ON RELEASE_MANAGEMENT_TRAN.CLIENT_ID = CLIENT_MASTER.CLIENT_ID
        WHERE 
            (@month = 0 OR (DATEPART(MONTH, FLOW_TRANSACTION.CREATED_ON) = @month))
            AND (DATEPART(YEAR, RELEASE_MANAGEMENT_TRAN.CREATED_ON) = @year)
            AND (@regionid IS NULL OR RELEASE_MANAGEMENT_TRAN.REGION_ID = @regionid)
            AND (@fromDate IS NULL OR RELEASE_MANAGEMENT_TRAN.CREATED_ON >= @fromDate)
            AND (@toDate IS NULL OR RELEASE_MANAGEMENT_TRAN.CREATED_ON <= @toDate)
            AND TO_STAGEID = '5'  
            AND STATUS != 'R' 
            AND REGION_MASTER.ACTIVE_STATE = 'A'
            AND CLIENT_MASTER.ACTIVE_STATE = 'A'
        GROUP BY
            RELEASE_MANAGEMENT_TRAN.REGION_ID,
            REGION_NAME

        UNION ALL

        SELECT
            RELEASE_MANAGEMENT_TRAN.REGION_ID, 
            REGION_NAME, 0,
            COUNT(FLOW_TRANSACTION.RM_ID)
        FROM
            FLOW_TRANSACTION 
        INNER JOIN 
            RELEASE_MANAGEMENT_TRAN ON RELEASE_MANAGEMENT_TRAN.RM_ID =  FLOW_TRANSACTION.RM_ID 
        INNER JOIN 
            REGION_MASTER ON RELEASE_MANAGEMENT_TRAN.REGION_ID = REGION_MASTER.REGION_ID 
        INNER JOIN 
            CLIENT_MASTER ON RELEASE_MANAGEMENT_TRAN.CLIENT_ID = CLIENT_MASTER.CLIENT_ID
        WHERE
            (@month = 0 OR (DATEPART(MONTH, FLOW_TRANSACTION.MODIFED_ON) = @month))
            AND (DATEPART(YEAR, FLOW_TRANSACTION.MODIFED_ON) = @year)
            AND (@regionid IS NULL OR RELEASE_MANAGEMENT_TRAN.REGION_ID = @regionid)
            AND (@fromDate IS NULL OR FLOW_TRANSACTION.MODIFED_ON >= @fromDate)
            AND (@toDate IS NULL OR FLOW_TRANSACTION.MODIFED_ON <= @toDate)
            AND FROM_STAGEID = 9 
            AND STAGE_STATUS = 'C' 
            AND REGION_MASTER.ACTIVE_STATE = 'A'
            AND CLIENT_MASTER.ACTIVE_STATE = 'A'
        GROUP BY
            RELEASE_MANAGEMENT_TRAN.REGION_ID,
            REGION_NAME
        ORDER BY 
            REGION_NAME

    SELECT
        REGION_ID, REGION_NAME,
        SUM([Received_Request]) AS [Received_Request],
        SUM([Delivered_Request]) AS [Delivered_Request]
    FROM
        #tempRegionalReport 
    GROUP BY 
        REGION_ID, REGION_NAME 
    ORDER BY 
        REGION_NAME

    IF OBJECT_ID('tempdb..#tempRegion') IS NOT NULL
        DROP TABLE #tempRegion
END

控制器方法如下：

public JsonResult NewChart(string month, string year, string regionid, string  fromdate, string todate)
{
        RegionalReportModule model = new RegionalReportModule();
        ReportDAL rdal = new ReportDAL();
        List<object> chartData = new List<object>();
      
       DataTable  dt = rdal.bindChart(Convert.ToInt32(month),Convert.ToInt32(year), Convert.ToInt32(regionid),Convert.ToDateTime(fromdate), Convert.ToDateTime(todate));

        // Looping and extracting each DataColumn to List < Object >
        foreach (DataColumn dc in dt.Columns)
        {
            List<object> x = new List<object>();
            x = (from DataRow drr in dt.Rows select drr[dc.ColumnName]).ToList();
            chartData.Add(x);
        }
        //Source data returned as JSON  
        return Json(chartData, JsonRequestBehavior.AllowGet);
}

最后，有人认为：

用于绑定jquery调用

<script>

    $.ajax({
        type: "POST",
        url: "/RegionalReport/NewChart",
        

       
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        chdata: '{"month":"' + month + '","year":"' + year + '","regionid":"' + regionid + '","fromdate":"' + fromdate + '","todate":"' + todate + '"}',
        success: function (chData) {
        var aData = chData;
        var aLabels = aData[0];
        var aDatasets1 = aData[1];
        var dataT = {
            labels: aLabels,
            datasets: [{
                label: "Regionwise Data",
                data: aDatasets1,
                fill: false,
                backgroundColor: ["rgba(54, 162, 235, 0.2)", "rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"],
                borderColor: ["rgb(54, 162, 235)", "rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"],
                borderWidth: 1
                }]
            };
        var ctx = $("#myChart").get(0).getContext("2d");
        var myNewChart = new Chart(ctx, {
            type: 'bar',
            data: dataT,
            options: {
                responsive: true,
                title: { display: true, text: 'CHART.JS DEMO CHART' },
                legend: { position: 'bottom' },
                scales: {
                xAxes: [{ gridLines: { display: false }, display: true, scaleLabel: { display: false, labelString: '' } }],
                yAxes: [{ gridLines: { display: false }, display: true, scaleLabel: { display: false, labelString: '' }, ticks: { stepSize: 50, beginAtZero: true } }]
            },
        }
        });
    }
});
</script>  

最后，我使用画布来显示图表

 <tr>
                <th scope="row">
                    <div Style="font-family: Corbel; font-size: small ;text-align:center " class="row">
                        <div style="width:100%;height:100%">
                            <canvas id="myChart" style="padding: 0;margin: auto;display: block; "> </canvas>
                        </div>
                    </div>
                </th>

但我无法显示图表。控制器中也没有返回任何内容，我的意思是没有返回参数

 <tr>
                <th scope="row">
                    <div Style="font-family: Corbel; font-size: small ;text-align:center " class="row">
                        <div style="width:100%;height:100%">
                            <canvas id="myChart" style="padding: 0;margin: auto;display: block; "> </canvas>
                        </div>
                    </div>
                </th>