Svg 画图(电池)

公司现在在做充电桩项目，其中要显示充电桩的电池充电情况，功能展示的时候要画图，之前做的时候准备使用HightChar来画，但是，hightchar好像没有这样的电池图形，最后，项目经理要我自己通过svg画，所以到网上找了一些网址学习svg,其中就有：点击这里，下面我就粘贴下代码和显示图片效果，希望能够帮助到一些朋友。

这里显示的是js文件：

$(function () {
    var id = getQueryString("id");
    QueryData(id);
    QueryItemData(id);
});

function QueryData(id) {
    zwobj.url = '../../WebService/ChargePileDetailService.ashx?action=QueryByZhuanId';
    zwobj.data = { id: id };
    ajaxData();
}

function QueryItemData(id) {
    zwobj.url = '../../WebService/ChargePileDetailService.ashx?action=QueryItemData';
    zwobj.data = { id: id };
    ajaxData();
}

//-----------------------------------------------------------------------

function ajax_QueryByZhuanId(data) {
    var len = data.Data.length;
    if (len <= 0) {
        return;
    }
    $("#gzml").append(data.Data[0].Gzml);
    $("#cddy").append(data.Data[0].Cddy + " V");
    $("#cddl").append(data.Data[0].Cddl + " A");
    $("#soc").append(data.Data[0].Soc + " %");
    $("#dtzgdy").append(data.Data[0].DtdyMax + " V");
    $("#dtzddy").append(data.Data[0].DtdyMin + " V");
    $("#jlsrdy").append(data.Data[0].Srjldy + " V");
    $("#sxdl-ia").append(data.Data[0].Ia + " A");
    $("#sxdl-ib").append(data.Data[0].Ib + " A");
    $("#sxdl-ic").append(data.Data[0].Ic + " A");
}

function ajax_QueryItemData(data) {
    $("#svg-img").empty();
    var dtMaxDy;
    var len = data.DtdyMax.length;
    if (len <= 0) {
        dtMaxDy = 255;
    } else {
        dtMaxDy = data.DtdyMax[0].dtdymax;
    }

    var x1 = 32.5, x2 = 25, x3 = 26, x4 = 15, x = -48;
    var y1 = 15, y2 = 20, y3 = 46, y4 = 85;
    var html = '<svg width="100%" height="1800px" version="1.1" xmlns="http://www.w3.org/2000/svg">';
    for (var i = 0, j = 0, k = 0; i < 255; i++) {
        var percent = percentItem(dtMaxDy, data.DataItemList[i].dtdy);
        percent = Math.ceil(percent);
        if (i % 17 == 0 && i != 0) {
            k++;
            j = 0;
        }
        if (k > 0) {
            html += '<rect x="' + (x1 + (46 * j)) + '" y="' + (y1 + 120 * k) + '" width="10" height="5" style="fill:white;stroke:black;stroke-width:2;opacity:0.9"/>';
            html += '<rect x="' + (x2 + (46 * j)) + '" y="' + (y2 + 120 * k) + '" width="25" height="50" style="fill:white;stroke:black;stroke-width:2;opacity:0.9"/>';

            var h = fillHeight(dtMaxDy, data.DataItemList[i].dtdy);
            var y = fillY((y2 + 120 * k), h);
            html += '<rect x="' + (x3 + (46 * j)) + '" y="' + y + '" width="23" height="' + h + '" style="fill:green;opacity:0.9"/>';

            switch (k) {
                case 1:
                    html += '<text x="' + ((x * k) + (23 * j)) + '" y="' + (y4 + 170 * k) + '" style="fill: #000" transform="translate(' + ((x * k) + (23 * j)) + ', 20) rotate(-45, ' + ((x * k) + (23 * j)) + ',110)">' + (i + 1) + ' (' + percent + '%)</text>';
                    break;
                case 2:
                case 3:
                case 4:
                case 5:
                    html += '<text x="' + ((x * k) + (23 * j) + ((-11) + (k - 2) * -13)) + '" y="' + (y4 + 170 * k) + '" style="fill: #000" transform="translate(' + ((x * k) + (23 * j) + ((-11) + (k - 2) * -13)) + ', 20) rotate(-45, ' + ((x * k) + (23 * j) + ((-11) + (k - 2) * -13)) + ',110)">' + (i + 1) + ' (' + percent + '%)</text>';
                    break;
                case 6:
                case 7:
                case 8:
                    html += '<text x="' + ((x * k) + (23 * j) + ((-11) + (k - 2) * -13)) + '" y="' + (y4 + 171 * k) + '" style="fill: #000" transform="translate(' + ((x * k) + (23 * j) + ((-11) + (k - 2) * -13)) + ', 20) rotate(-45, ' + ((x * k) + (23 * j) + ((-11) + (k - 2) * -13)) + ',110)">' + (i + 1) + ' (' + percent + '%)</text>';
                    break;
                case 9:
                case 10:
                    html += '<text x="' + ((x * k) + (23 * j) + ((-8) + (k - 2) * -13)) + '" y="' + (y4 + 170.5 * k) + '" style="fill: #000" transform="translate(' + ((x * k) + (23 * j) + ((-8) + (k - 2) * -13)) + ', 20) rotate(-45, ' + ((x * k) + (23 * j) + ((-8) + (k - 2) * -13)) + ',110)">' + (i + 1) + ' (' + percent + '%)</text>';
                    break;
                case 11:
                case 12:
                case 13:
                    html += '<text x="' + ((x * k) + (23 * j) + ((-5) + (k - 2) * -13)) + '" y="' + (y4 + 170.5 * k) + '" style="fill: #000" transform="translate(' + ((x * k) + (23 * j) + ((-5) + (k - 2) * -13)) + ', 20) rotate(-45, ' + ((x * k) + (23 * j) + ((-5) + (k - 2) * -13)) + ',110)">' + (i + 1) + ' (' + percent + '%)</text>';
                    break;
                case 14:
                    html += '<text x="' + ((x * k) + (23 * j) + ((-3) + (k - 2) * -13)) + '" y="' + (y4 + 170.2 * k) + '" style="fill: #000" transform="translate(' + ((x * k) + (23 * j) + ((-3) + (k - 2) * -13)) + ', 20) rotate(-45, ' + ((x * k) + (23 * j) + ((-3) + (k - 2) * -13)) + ',110)">' + (i + 1) + ' (' + percent + '%)</text>';
                    break;
                default:
                    html += '<text x="' + ((x * k) + (23 * j)) + '" y="' + (y4 + 170 * k) + '" style="fill: #000" transform="translate(' + ((x * k) + (23 * j)) + ', 20) rotate(-45, ' + ((x * k) + (23 * j)) + ',110)">' + (i + 1) + ' (' + percent + '%)</text>';
                    break;
            }
            j++;
        }
        else {
            html += '<rect x="' + (x1 + (46 * i)) + '" y="' + y1 + '" width="10" height="5" style="fill:white;stroke:black;stroke-width:2;opacity:0.9"/>';
            html += '<rect x="' + (x2 + (46 * i)) + '" y="' + y2 + '" width="25" height="50" style="fill:white;stroke:black;stroke-width:2;opacity:0.9"/>';
            var h22 = fillHeight(dtMaxDy, data.DataItemList[i].dtdy);
            var y22 = fillY(y2, h22);
            html += '<rect x="' + (x3 + (46 * i)) + '" y="' + y22 + '" width="23" height="' + h22 + '" style="fill:green;opacity:0.9"/>';
            html += '<text x="' + (x4 + (23 * i)) + '" y="' + y4 + '" style="fill: #000" transform="translate(' + (x4 + (23 * i)) + ', 20) rotate(-45, ' + (x4 + (23 * i)) + ',110)">' + (i + 1) + ' (' + percent + '%)</text>';
        }
    }
    html += '</svg>';
    $("#svg-img").append(html);
}

//求填充电池的高度(50是图形的高度)
function fillHeight(itemMaxDy, itemDy) {
    return (50 * itemDy) / itemMaxDy;
}

//求填充电池的y点坐标
function fillY(y1, h) {
    return (y1 + 50 - h);
}

//求单体百分比
function percentItem(itemMaxDy, itemDy) {
    return (itemDy / itemMaxDy) * 100;
}

 

这里显示的是cs文件效果：

using System;
using System.Collections;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Reflection;
using System.ServiceModel.Channels;
using System.Web;
using System.Web.Script.Serialization;
using ChargingPile.Model;
using ChargingPile.DAL;

namespace ChargingPile.UI.WEB.WebService
{
    /// <summary>
    /// Summary description for ChargePileDetailService
    /// </summary>
    public class ChargePileDetailService : IHttpHandler
    {
        private readonly JavaScriptSerializer _jss = new JavaScriptSerializer();
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            var action = context.Request.Params["action"];
            var curType = GetType();
            var method = curType.GetMethod(action, BindingFlags.NonPublic | BindingFlags.Public | BindingFlags.Instance);
            if (method != null)
            {
                method.Invoke(this, new object[] { HttpContext.Current });
            }
        }

        /// <summary>
        /// 根据桩id获取数据采集实时表数据
        /// </summary>
        /// <param name="httpContext"></param>
        public void QueryByZhuanId(HttpContext httpContext)
        {
            var dataAcquisitionNewDal = new DataAcquisitionNewDal();
            var id = httpContext.Request.Params["id"];
            var hashTable = new Hashtable();
            try
            {
                var data = dataAcquisitionNewDal.QueryById(id);
                var list = (from row in data.AsEnumerable()
                            select new DataAcquisitionNew()
                                {
                                    Gzml = row.Field<string>("gzml"),
                                    Cddy = row.Field<decimal>("cddy"),
                                    Cddl = row.Field<decimal>("cddl"),
                                    Soc = row.Field<decimal>("soc"),
                                    DtdyMax = row.Field<decimal>("dtdymax"),
                                    DtdyMin = row.Field<decimal>("DtdyMin"),
                                    Srjldy = row.Field<decimal>("Srjldy"),
                                    Ia = row.Field<decimal>("Ia"),
                                    Ib = row.Field<decimal>("Ib"),
                                    Ic = row.Field<decimal>("Ic")
                                }).ToList();

                hashTable["IsSuccess"] = true;
                hashTable["Data"] = list;
                hashTable["JsExecuteMethod"] = "ajax_QueryByZhuanId";
                var json = _jss.Serialize(hashTable);
                httpContext.Response.Write(json);
            }
            catch (Exception e)
            {
                hashTable["IsSuccess"] = false;
                hashTable["Msg"] = "错误" + e.Message;
                var json = _jss.Serialize(hashTable);
                httpContext.Response.Write(json);
                throw;
            }
        }

        public void QueryItemData(HttpContext context)
        {
            var dataAcquisitionNewDal = new DataAcquisitionNewDal();
            var id = context.Request.Params["id"];
            var hashTable = new Hashtable();
            try
            {
                var data = dataAcquisitionNewDal.QueryByItems(id);
                var dtList = (from row in data.AsEnumerable()
                              select new
                              {
                                  dtid = row.Field<decimal>("dtid"),
                                  dtdy = row.Field<decimal>("dtdy")
                              }).ToList();
                var dtdyMaxList = (from row in data.AsEnumerable()
                                   select new
                                   {
                                       dtdymax = row.Field<decimal>("dtdymax")
                                   }).ToList().Distinct();
                for (var i = 1; i <= 255; i++)
                {
                    var item = from li in dtList
                               where li.dtid == i
                               select li;
                    if (!item.Any())
                    {
                        dtList.Add(new { dtid = (decimal)i, dtdy = (decimal)0 });
                    }
                }

                hashTable["IsSuccess"] = true;
                hashTable["DataItemList"] = dtList.OrderBy(s => s.dtid).ToList();
                hashTable["DtdyMax"] = dtdyMaxList.ToList();
                hashTable["JsExecuteMethod"] = "ajax_QueryItemData";
                var json = _jss.Serialize(hashTable);
                context.Response.Write(json);
            }
            catch (Exception e)
            {
                hashTable["IsSuccess"] = false;
                hashTable["Msg"] = "错误" + e.Message;
                var json = _jss.Serialize(hashTable);
                context.Response.Write(json);
                throw;
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

效果如图：

 

总结：

每篇博客都要写些文字来总结，就是充当字数，要不然博客园不允许发表到首页^_^，我还是来总结下svg画图功能吧，svg画图最基本的就是确定坐标点，如图：

注意：只有找准坐标点，那么才能画图，过程中涉及到一些小调整和算法，这个代码里都有我就不多说了，再多说一句，画图时一点一点的画，不要着急。^_^