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画图最基本的就是确定坐标点，如图：
注意：只有找准坐标点，那么才能画图，过程中涉及到一些小调整和算法，这个代码里都有我就不多说了，再多说一句，画图时一点一点的画，不要着急。^_^
Svg 画图(电池)的更多相关文章
- JS 操作svg画图
背景: 一共有3个文件:svg文件,html文件,js文件. 有一个svg图,使用embed标签,引入到了html文件中 svg文件: <svg width="640" he ...
- 关于HTML5用SVG画图
SVG在HTML5中的应用 SVG(Scalable Vector Graphics)是用来绘制矢量图的HTML5标签.只要定义好XML属性就能够获得与其一致的图像元素. 使用SVG之前先将标签加入到 ...
- SVG和canvas画图，js求数组最大最小值
windows命令行的内容怎么复制,右键选择标记,选中内容后再点击鼠标右键就复制了. 安装Node.js后再用npm install命令会出现如下warn:saveError ENOENT: no s ...
- 使用 SVG 和 JS 创建一个由星形变心形的动画
序言:首先,这是一篇学习 SVG 及 JS 动画不可多得的优秀文章.我非常喜欢 Ana Tudor 写的教程.在她的教程中有大量使用 SVG 制作的图解以及实时交互 DEMO,可以说教程的所有细枝末节 ...
- R语言︱SNA-社会关系网络—igraph包（社群划分、画图）（三）
每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 社群划分跟聚类差不多,参照<R语言与网站 ...
- svg绘图工具raphael.js的使用
1.raphael.js svg画图的开源库,支持IE8+ 官方api: http://dmitrybaranovskiy.github.io/raphael/reference.html Githu ...
- svg的学习
svg的学习 1,初步了解 1,大致看了一下svg的简介,在图形的操作和展示上有很大的优势,例如不会失精:灵活的dom操作:很好的兼容性(IE需要下载插件).so,是一门值得深究的前端课程: 2,看了 ...
- 使用css3新属性clip-path制作小图标
一般一个网页上面,或多或少都会用到一些小图标,展示这些小图标的方法有很多种.最简单的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片.但这也是比较笨的方法,因为浏览器同一时间最多加载 ...
- web前端面试题(一)
1 选择题 1.1 默认情况下,使用P标记会形成什么效果() A.在文字P所在位置中加入8个空格 B.P后面的文字会变成粗体 C.开始新的一行 D.P后面的文字会变成斜体 答案: C 1.2 ...
随机推荐
- Angular2 从0到1 （一）
史上最简单Angular2教程,大叔都学会了 作者:王芃 wpcfan@gmail.com 第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:An ...
- Sharepoint 列表
1.将SharePoint 2010列表数据使用Access打开 在SharePoint 2010新增加了对列表在Access客户端的打开,可以在Microsoft Access 中处理列表中的项目, ...
- Servlet & JSP - Filter
过滤器可以对用户的请求拦截,进行预处理操作,接着将请求交给 Servlet 处理并生成响应,最后再对响应拦截,进行后处理操作.过滤器应用的场景有:用户登录.加密解密.会话校验等. Filter API ...
- Jquery选择器 讲解
在Dom 编程中我们只能使用有限的函数根据id 或者TagName 获取Dom 对象. 然而在jQuery 中则完全不同,jQuery 提供了异常强大的选择器用来帮助我们获取页面上的对象, 并且将对象 ...
- Java Servlet-http协议
---恢复内容开始--- 互联网三大基石: url:定位数据 html:显示数据 http:传输数据
- Java之日期和时间的计算
学习是一个循序渐进的过程,不知道你们有没有这样的感受:有很多学习过的知识在很久没有温习之后就不知不觉地还给老师了.所以最近总结,把那些还给老师的再找回来. 运行图: 时间戳: 运行效果图: 时间日期的 ...
- 一个简单的Makefile的编写【用自己的话，解释清楚这些】
用自己的话,解释清楚这些~ Makefile是程序员编写出来指导编译器编译程序源码为目标文件(可执行文件,或链接库) 这里只写一个简单的Makefile 作为例子 其需求如下: frank@ubunt ...
- HMTL笔记——Iframe
1.以iframe 引入的银行支付界面 不能够弹出插件,但是用户安装了插件才能够去支付. 2.以Iframe引入的页面在引入的界面中的跳转都只能在当前Iframe中完成,如果想要跳出则需要window ...
- iOS进阶——可取消的block
+ (id)performBlock:(void (^)())aBlock onQueue:(dispatch_queue_t)queue afterDelay:(NSTimeInterval)del ...
- JSONP VS CORS
What is JSONP ? http://stackoverflow.com/questions/2067472/what-is-jsonp-all-about What is CORS? htt ...