记录HTML+ashx或aspx+ashx绑定SQL数据库数据的实例，方便以后查阅。
HTML
其中jquery-1.8.1.min.js、echarts.js文件自行在网上下载 HTML代码：
oee.js代码：
//function Oee(o) {
var myChart1 = echarts.init(document.getElementById('oee'));
var option1;
option1 = {
tooltip: {
formatter: "{b} : {c}%",
},
series: [
{
name: '',
type: 'gauge',
min: 0,//最小值
max: 100,//最大值
splitNumber: 10, //刻度的个数
radius: "100%",//大小
title: {
textStyle: { //当前温度的文字大小
fontSize: 18,
color: 'white',
},
},
pointer: { //指针
width: 3,
length: '90%',
},
axisLabel: { //刻度的大小
textStyle: {
fontSize: 16,
},
},
axisLine: { //外轮廓的宽度
lineStyle: {
width: 15,
color: [[0.6, '#c23531'], [0.8, '#63869e'], [1, '#91c7ae']],
}
},
splitLine: { //刻度线的长度和宽度
length: 15,
lineStyle: {
width: 1,
}
},
detail: {
formatter: '{value}%',
textStyle: { //当前温度的文字大小
fontSize: 16,
color: 'white',
},
},
data: [{
value:60,
name: 'OEE',
}]
}
]
};
//实时更新数据,循环读值
var gettingoee = {
type: "post",
async: false,
url: "cs/Test03.ashx",//文件地址自行定义
data: { cmd: "test" }, //发送到服务器的参数
datatype: "json",
success: function (result3) {
if (result3) {
eval("var transresult=" + result3);
option1.series[0].data[0].value = [transresult[0].OEE];
myChart1.setOption(option1, true);
}
},
error: function (errorMsg) {
alert("request data failed!!!");
}
}
window.setInterval(function () { $.ajax(gettingoee) }, 3000); //每三秒调用一次ajax
myChart1.setOption(option1, true);
setTimeout(function () {
window.onresize = function () {
fn3();
myChart1.resize();
}
}, 2000)
//}
function randomFrom(lowerValue, upperValue) {
return (Math.random() * (upperValue - lowerValue + 1) + lowerValue).toFixed(1);
}
function fn3() {//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
var height = document.getElementById("mac").offsetHeight
var width = document.getElementById("mac").offsetWidth
}
aspx
其中js代码与上面相同 aspx代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="PCP.WebForm1" %>
ashx
该文件用于连接数据库 ashx代码：
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
{
///
/// Test03 的摘要描述
///
public class Test03 : IHttpHandler
{
SqlConnection con = new SqlConnection("Data Source =192.168.1.1;Initial Catalog=test;User Id=sa;Password=sa");//连接sql数据库字符串
DataSet ds = new DataSet();
SqlDataAdapter adapter = new SqlDataAdapter();
JavaScriptSerializer jsS = new JavaScriptSerializer();
List
//Series seriesObj = new Series();
string result3 = "";
public void ProcessRequest(HttpContext context)
{
//获取一同发送过来的参数
//string command = context.Request["cmd"];
context.Response.ContentType = "text/plain";
//用来传回去的内容
//context.Response.Write("Hello World");
Get_Data03(context);
}
public void Get_Data03(HttpContext context)
{
string sql = @"exec proc_search_OEE1 @linn='z1' ,@Bc_Hour_day='Bc'";//自己写的预存程式，也可换为基本查询语言
ds = GetDataFromDatabase(sql);
lists = new List
foreach (DataRow dr in ds.Tables[0].Rows)
{
var obj = new { OEE = dr["OEE"] };
lists.Add(obj);
}
jsS = new JavaScriptSerializer();
result3 = jsS.Serialize(lists);
context.Response.Write(result3);
}
public DataSet GetDataFromDatabase(string sql)
{
ds = new DataSet();
adapter = new SqlDataAdapter(sql, con);
adapter.Fill(ds);
return ds;
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
实例照片： 说明：以上代码可自行运行查看效果，分别以HTML+ashx或aspx+ashx或HTML+aspx+ashx，根据个人需求自行测试。
参考阅读
您阅读本篇文章共花了：
发表评论