如何解决无法在Asp.net MVC中获取条形图
我正在尝试在ASP.NET MVC中获取条形图，但未显示。
我必须在X轴上显示Region，在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,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,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,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 DataTable bindChart(int month,int year,int regionid,DateTime fromdate,DateTime todate)
{
if (connection.State == ConnectionState.Closed)
{
connection.Open();
}
string Sqlstr = "SP_GetRegionWiseReport";
dt = new DataTable();
// con = new SqlConnection(cs);
SqlCommand comm = new SqlCommand(Sqlstr,connection);
comm.CommandType = CommandType.StoredProcedure;
comm.Parameters.AddWithValue("@month",month);
comm.Parameters.AddWithValue("@year",year);
comm.Parameters.AddWithValue("@regionid",regionid);
comm.Parameters.AddWithValue("@fromDate",fromdate);
comm.Parameters.AddWithValue("@toDate",todate);
foreach (SqlParameter parameter in comm.Parameters)
{
if (parameter.Value == null)
{
parameter.Value = DBNull.Value;
}
}
adapt = new SqlDataAdapter(comm);
adapt.Fill(dt);
return dt;
}
控制器方法如下：
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,159,64,205,86,"rgba(75,192,"rgba(153,102,255,"rgba(201,203,207,0.2)"],borderColor: ["rgb(54,235)","rgb(255,132)",64)",86)","rgb(75,192)","rgb(153,255)","rgb(201,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 },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>
但是我无法显示图表。另外，控制器中什么也没有返回，这意味着未返回参数。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
