C# 动态显示数据，web页面可拖动的温度计

该温度计控件主要通过一个类来实现，温度计根据高度来显示刻度数值，可根据获得的温度数值大小来填充颜色；同时，通过js脚本控制可在当前页面拖动该温度计控件放置于指定位置。

类：

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Drawing;
using System.Drawing.Imaging;
namespace WebChart
{
    public class temperControl : HtmlGenericControl
    {
        public temperControl(int imageWidth, int imageHeight, int dataValue, string fileName)
        {
            div = new HtmlGenericControl("div");
            img = new HtmlGenericControl("img");
            img.Attributes["Src"] = chartDraw(imageWidth, imageHeight, dataValue, fileName);
            img.Attributes["runnat"] = "server";
            img.Attributes["id"] = "imgChart";
            this.div.Controls.Add(img);
            div.Attributes["id"] = "divDrg";
            div.Attributes["onmouseover"] = "Drag.init(this);";
            div.Style["position"] = "absolute";
            this.Controls.Add(div);
        }
        protected HtmlGenericControl div;
        protected HtmlGenericControl img;

        protected string chartDraw(int imageWidth, int imageHeight, int dataValue, string fileName)
        {

            try
            {
                if (imageHeight < 290)
                {
                    imageHeight = 160;
                }
                if (imageWidth < 80)
                {
                    imageWidth = 80;
                }

                Bitmap image = new Bitmap(imageWidth, imageHeight);

                Graphics g = Graphics.FromImage(image);
                g.Clear(Color.Silver);

                int px = Convert.ToInt32(Unit.Percentage(image.Width * 0.5).Value);
                int xValue = Convert.ToInt32(Unit.Percentage(px * 0.1).Value);
                int length = Convert.ToInt32(Unit.Percentage(image.Height * 0.95).Value);
                int width = Convert.ToInt32(Unit.Percentage(image.Height * 0.1).Value);

                Point[] point1 = new Point[] { new Point(xValue * 6, 2), new Point(xValue * 6, length) };//刻度起点
                Point[] point2 = new Point[] { new Point(xValue * 8, 2), new Point(xValue * 8, length) };

                g.DrawEllipse(new Pen(Color.Black, 1), xValue * 8 + 4, 2, 2, 2);     //单位
                g.DrawString("C", new Font("宋体", 9), Brushes.Black, new Point(xValue * 8 + 6, 2));

                g.DrawLine(new Pen(Color.Green, 1), new Point(xValue * 6, 2), new Point(xValue * 8, 2));
                g.DrawLines(new Pen(Color.Green, 1), point1);
                g.DrawLines(new Pen(Color.Green, 1), point2);
                g.DrawBezier(new Pen(Color.Red, 2), point1[1], new Point(xValue * 4, image.Height), new Point(xValue * 10, image.Height), point2[1]);
                System.Drawing.Drawing2D.GraphicsPath path = new System.Drawing.Drawing2D.GraphicsPath();
                path.AddBezier(point1[1], new Point(xValue * 4, image.Height), new Point(xValue * 10, image.Height), point2[1]);
                g.FillPath(new SolidBrush(Color.Red), path);
                double yValue = Convert.ToDouble((Convert.ToInt32(Unit.Percentage((length - 10) * 0.99).Value))) / 130;
                int value = 0;
                if (Convert.ToInt32(yValue) * 130 <= Convert.ToInt32(Unit.Percentage((length - 10) * 0.99).Value))
                {
                    value = Convert.ToInt32(yValue);
                }
                else
                {
                    value = Convert.ToInt32(yValue) - 1;
                }
                for (int i = 0; i <= 130; i++)
                {
                    int k = 5;
                    if (i % 5 == 0)
                    {
                        k = 10;
                    }
                    if (i % 10 == 0)
                    {
                        k = 15;
                    }
                    int addValue = value * i;
                    if (i == 130)
                    {
                        int a = point2[1].Y - addValue;

                    }
                    Point[] pointI = new Point[] { new Point(point2[1].X, point2[1].Y - addValue), new Point(point2[1].X + k, point2[1].Y - addValue) };
                    if (imageHeight < 290)
                    {
                        if (k != 5)
                        {
                            g.DrawLines(new Pen(Color.Black, 1), pointI);
                        }
                    }
                    else
                    {
                        g.DrawLines(new Pen(Color.Black, 1), pointI);
                    }
                    if (k == 15)
                    {
                        int point = i - 30;
                        g.DrawString(point.ToString(), new Font("宋体", 9), Brushes.Black, new Point(pointI[1].X + 2, pointI[1].Y - 5));
                    }

                }
                int data = dataValue;
                if (dataValue >= 0 && dataValue <= 100)
                {
                    dataValue = (dataValue + 30) * value;

                }
                else if (-30 <= dataValue && dataValue < 0)
                {
                    dataValue = (dataValue + 30) * value;

                }
                else if (dataValue < -30)
                {
                    dataValue = (-30 + 30) * value;
                }
                else if (dataValue > 100)
                {
                    dataValue = (100 + 30) * value;
                }
                g.FillRectangle(new SolidBrush(Color.Red), point1[1].X, point1[1].Y - dataValue, xValue * 2, dataValue);
                g.DrawString(data.ToString(), new Font("宋体", 9), Brushes.Red, new Point(point1[1].X - 22, point1[1].Y - dataValue - 5));
                if (fileName == null || fileName == "")
                {
                    fileName = ".";
                }
                string filePath = System.Web.HttpContext.Current.Server.MapPath(fileName) + "//" + "chart_" + System.DateTime.Now.ToShortDateString() + ".Gif";
                image.Save(filePath, ImageFormat.Gif);
                image.Dispose();
                g.Dispose();
                string ImageSrc = "";
                if (fileName == ".")
                {
                    ImageSrc = "chart_" + System.DateTime.Now.ToShortDateString() + ".Gif";
                }
                else
                {
                    ImageSrc = fileName + "/" + "chart_" + System.DateTime.Now.ToShortDateString() + ".Gif";
                }
                return ImageSrc;
            }
            catch { return null; }
        }

    }
}

脚本：

var Drag = {
 
 divDrag:null,
 
 init:function(divDrag){
  divDrag.onmousedown = this.start;
 },
 start:function(e){
  var divDrag;
  e = Drag.fixEvent(e);
  e.preventDefault && e.preventDefault();
  Drag.divDrag = divDrag = this;
  divDrag.x = e.clientX - Drag.divDrag.offsetLeft;
  divDrag.y = e.clientY - Drag.divDrag.offsetTop;
  document.onmousemove = Drag.move;
  document.onmouseup = Drag.end;
 },
 move:function(e){
  e = Drag.fixEvent(e);
  var oLeft,oTop;
  oLeft = e.clientX - Drag.divDrag.x;
  oTop = e.clientY - Drag.divDrag.y;
  Drag.divDrag.style.left = oLeft + 'px';
  Drag.divDrag.style.top = oTop + 'px';
 },
  end:function(e){
  e = Drag.fixEvent(e);
  Drag.divDrag = document.onmousemove = document.onmouseup = null;
 },
fixEvent: function(e){
if (!e) {
            e = window.event;
            e.target = e.srcElement;
            e.layerX = e.offsetX;
            e.layerY = e.offsetY;
        }
        return e;
    }
}