记录HTML&＃43;ashx或aspx&＃43;ashx绑定SQL数据库数据的实例&＃xff0c;方便以后查阅。
HTML
其中jquery-1.8.1.min.js、echarts.js文件自行在网上下载
HTML代码&＃xff1a;
<!DOCTYPE html>
<html xmlns&＃61;"http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv&＃61;"Content-Type" content&＃61;"text/html; charset&＃61;utf-8"/><title></title><script src&＃61;"js/jquery-1.8.1.min.js" type&＃61;"text/Javascript"></script><style>body{background-color :black;}</style>
</head>
<body><div id&＃61;"oee" style&＃61;"width:300px;height:300px"></div><script type&＃61;"text/Javascript" src&＃61;"js/echarts.js"></script><script src&＃61;"js/class/oee.js"></script>
</body>
</html>
oee.js代码&＃xff1a;
var myChart1 &＃61; echarts.init(document.getElementById(&＃39;oee&＃39;));
var option1;option1 &＃61; {tooltip: {formatter: "{b} : {c}%",},series: [{name: &＃39;&＃39;,type: &＃39;gauge&＃39;,min: 0,max: 100,splitNumber: 10, radius: "100%",title: {textStyle: { fontSize: 18,color: &＃39;white&＃39;,},},pointer: { width: 3,length: &＃39;90%&＃39;,},axisLabel: { textStyle: {fontSize: 16,},},axisLine: { lineStyle: {width: 15,color: [[0.6, &＃39;#c23531&＃39;], [0.8, &＃39;#63869e&＃39;], [1, &＃39;#91c7ae&＃39;]],}},splitLine: { length: 15,lineStyle: {width: 1,}},detail: {formatter: &＃39;{value}%&＃39;,textStyle: { fontSize: 16,color: &＃39;white&＃39;,},},data: [{value:60,name: &＃39;OEE&＃39;,}]}]}; var gettingoee &＃61; {type: "post",async: false,url: "cs/Test03.ashx",data: { cmd: "test" }, datatype: "json",success: function (result3) {if (result3) {eval("var transresult&＃61;" &＃43; result3);option1.series[0].data[0].value &＃61; [transresult[0].OEE];myChart1.setOption(option1, true);}},error: function (errorMsg) {alert("request data failed!!!");}}window.setInterval(function () { $.ajax(gettingoee) }, 3000); myChart1.setOption(option1, true); setTimeout(function () {window.onresize &＃61; function () {fn3();myChart1.resize();}}, 2000)
function randomFrom(lowerValue, upperValue) {return (Math.random() * (upperValue - lowerValue &＃43; 1) &＃43; lowerValue).toFixed(1);
}
function fn3() {var height &＃61; document.getElementById("mac").offsetHeightvar width &＃61; document.getElementById("mac").offsetWidth
}
aspx
其中js代码与上面相同
aspx代码&＃xff1a;
<%&＃64; Page Language&＃61;"C#" AutoEventWireup&＃61;"true" CodeBehind&＃61;"WebForm1.aspx.cs" Inherits&＃61;"PCP.WebForm1" %><!DOCTYPE html><html xmlns&＃61;"http://www.w3.org/1999/xhtml">
<head runat&＃61;"server">
<meta http-equiv&＃61;"Content-Type" content&＃61;"text/html; charset&＃61;utf-8"/><title></title><script src&＃61;"js/jquery-1.8.1.min.js" type&＃61;"text/Javascript"></script><style>body{background-color :black;}</style>
</head>
<body><form id&＃61;"form1" runat&＃61;"server"><div><div id&＃61;"oee" style&＃61;"width:300px;height:300px"></div><script type&＃61;"text/Javascript" src&＃61;"js/echarts.js"></script><script src&＃61;"js/class/oee.js"></script> </div></form>
</body>
</html>
ashx
该文件用于连接数据库
ashx代码&＃xff1a;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Data.SqlClient;
using System.Web.Script.Serialization;namespace PCP.cs
{public class Test03 : IHttpHandler{SqlConnection con &＃61; new SqlConnection("Data Source &＃61;192.168.1.1;Initial Catalog&＃61;test;User Id&＃61;sa;Password&＃61;sa");DataSet ds &＃61; new DataSet();SqlDataAdapter adapter &＃61; new SqlDataAdapter();JavascriptSerializer jsS &＃61; new JavascriptSerializer();List<object> lists &＃61; new List<object>();string result3 &＃61; "";public void ProcessRequest(HttpContext context){context.Response.ContentType &＃61; "text/plain";Get_Data03(context);}public void Get_Data03(HttpContext context){string sql &＃61; &＃64;"exec proc_search_OEE1 &＃64;linn&＃61;&＃39;z1&＃39; ,&＃64;Bc_Hour_day&＃61;&＃39;Bc&＃39;";ds &＃61; GetDataFromDatabase(sql);lists &＃61; new List<object>();foreach (DataRow dr in ds.Tables[0].Rows){var obj &＃61; new { OEE &＃61; dr["OEE"] };lists.Add(obj);}jsS &＃61; new JavascriptSerializer();result3 &＃61; jsS.Serialize(lists);context.Response.Write(result3);}public DataSet GetDataFromDatabase(string sql){ds &＃61; new DataSet();adapter &＃61; new SqlDataAdapter(sql, con);adapter.Fill(ds);return ds;}public bool IsReusable{get{return false;}}}
}
实例照片&＃xff1a;
说明&＃xff1a;以上代码可自行运行查看效果&＃xff0c;分别以HTML&＃43;ashx或aspx&＃43;ashx或HTML&＃43;aspx&＃43;ashx&＃xff0c;根据个人需求自行测试。
京公网安备 11010802041100号