前端
需要引用Chart.bundle.min.js和jquery
<canvas id="myChart"></canvas> <script> var _ID=<%=SupplierId%>; function Chart2(ID) { var data1; var _url = "../AjaxBll/MatchChart.ashx"; $.ajax({ type: "get", url: _url, dataType: "json", async: false, data: { "ID": ID, }, success: function (data) { datachar = data; } }); var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, datachar); } function Do(){ Chart2(_ID); } Chart2(_ID); </script>
后端
public string BindData(int ID,bool md) { whereSupplier = "SupplierId = " + ID.ToString();//匹配到的询盘 DataSet ds = DbHelperSQL.Query(WriteSql(SetDate(whereSupplier),md)); DataTable tb= ds.Tables[0]; where2 = "Msg_InceptDel = " + ID.ToString();//接收到的询盘 DataSet ds2 = DbHelperSQL.Query(WriteSql2(SetDate2(where2),md)); DataTable tb2= ds2.Tables[0]; #region 拼接JSON string date = "["; //X轴.日期 string num = "["; //根据日期,匹配到的询盘数量 string num2 = "["; for (int i = 0; i <= tb.Rows.Count - 1; i++) { if (i != 0) { num += "," + tb.Rows[i]["Count"]; date += "," + """ + tb.Rows[i]["dtime"] + """; } else { num += tb.Rows[i]["Count"]; date += """ + tb.Rows[i]["dtime"] + """; } } for (int i = 0; i <= tb2.Rows.Count - 1; i++) { if (i != 0) { num2 += "," + tb2.Rows[i]["Count"]; } else { num2 += tb2.Rows[i]["Count"]; } } num += "]"; date += "]"; num2 += "]"; #endregion return "{"type": "line","data": {"labels": " + date + ","datasets": [{"label":"匹配 询盘数量","backgroundColor": "rgba(0, 0, 0, 0)","borderColor": "rgba(75, 192, 192, 1)","data": " + num + "},{"label":"收到的询盘数量","backgroundColor": "rgba(0, 0, 0, 0)","borderColor": "rgba(255, 106, 106, 1)","data": " + num2 + "}]}}"; }