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画图最基本的就是确定坐标点，如图：
注意：只有找准坐标点，那么才能画图，过程中涉及到一些小调整和算法，这个代码里都有我就不多说了，再多说一句，画图时一点一点的画，不要着急。^_^
