Web仪表板的通用量规

分享于 

18分钟阅读

Web开发

  繁體

介绍

Ploetz + Zeller GmbH中,我搜索一个基于web的免费JavaScript规范插件,它可以在+ GmbH中使用,它是过程管理软件Symbio的业务。 找到的最佳匹配是 justGauge,但它有两个不适合我的特性:

  • 它不显示质量控制图表所需的警告限制或者操作限制。

这样就产生了 justGauge的方法,并创建了我自己的插件 gaugeSVG

这个图片显示 gaugeSVG 看起来像。 这是从可以下载的来源和样例。

背景

gaugeSVG 是纯 SVG,分辨率独立矢量图形,几乎可以在任何浏览器- IE6+,Chrome,Firefox,Safari,Opera,安卓等。

因为我将解释使用的SVG技术,这也很好地介绍了与JavaScript连接的高级SVG功能。

使用代码

要使用 gaugeSVG,只需要满足三个要求:

  • 必须将 gaugeSVG JavaScript包含到HTML文档中。
<scriptsrc="javascript/gaugeSVG.js"></script>
  • HTML文档必须包含带有 idwidthheightdiv 元素,可以用作 gaugeSVG的容器。
<divid="container1"style="width:350px; height:300px"></div>
  • 必须使用文档容器的HTML divid 初始化 gaugeSVG JavaScript。
<script>
 window.onload = function(){
 var gauge1 = new GaugeSVG({
 id: "container1" });
 };
</script> 

初始化代码 上面 显示最小初始化。 可以使用更多的参数来操作仪表功能和外观。

这个图像说明了 gaugeSVG的部分,其中大部分都是可以配置的。

可能的初始化参数包括:

  • title: [string] 显示的标题文本显示为 上面。 它可以是一个空的string 被抑制。 默认为空 string
  • titleColor: [#rrggbb]的标题颜色。 默认值为" #888888"。
  • value: [float] 要显示的值。 默认值为( 最大最小值)/2.0. 值 below min 显示为 min。 值 上面 max 显示为 max
  • valueColor: [#rrggbb] 值文本颜色。 默认值为" #000000"。精确值显示在标尺的中心,作为文本。
  • label: [string] 标签显示值文本。 它可以是一个空字符串,被取消。 默认值为空字符串。通常用于显示值单位的度量值。
  • labelColor: [#rrggbb] 标签文本颜色。 默认值为" #888888"。
  • min: [float] 显示范围的最小值。 如果是 showMinMax true,则在标尺起始点显示为文本。
  • max: [float] 显示范围的最大值。 如果是 showMinMax true,则在标尺起始点显示为文本。
  • showMinMax: [bool] 隐藏或者显示 minmax 仪表显示范围值作为文本。 默认值为 true
  • minmaxColor: [#rrggbb] 值的minmax 文本。 默认值为" #888888"。
  • canvasBackColor: [#rrggbb] 画布的background 颜色。 默认值为" #f8f8f8"。
  • gaugeWidthScale: [float] arc的宽度。 默认值为 1.0.有意义的值范围从 0.15到 1.5. 较低的值显示较小的arc,较高的值显示较粗的arc。
  • gaugeBorderColor: [float] 规范 arc 边框颜色。 默认值为" #cccccc"。
  • gaugeBorderWidth: [#rrggbb] arc 边框宽度。 默认值为 0
  • gaugeBackColor: [#rrggbb] arc background 颜色。 默认值为" #cccccc"。
  • showGaugeShadow: [bool] 隐藏或者显示标尺 arc 阴影。 默认值为 true。标准阴影由SVG径向渐变构成。 渐变起始颜色是 gaugeShadowColor。 渐变停止颜色是 gaugeBackColor
  • gaugeShadowColor: [#rrggbb] 规范的arc 阴影颜色。 默认值为" #000000"。
  • gaugeShadowScale: [float]的测量阴影的宽度。 默认值为 1.0.有意义的值范围从 0.8到 1.5. 值越小,阴影越小,值越高,阴影越大。
  • lowerActionLimit: [float]的操作极限或者负值,如果不需要,则为负值。 默认值为( 最大最小值) * 0.15 + min。
  • lowerWarningLimit: [float]的警告限制或者负值,如果不需要。 默认值为( 最大最小值) * 0.30 + min。
  • upperWarningLimit: [float]的上一个警告限制或者负值,如果不需要。 默认值为( 最大最小值) * 0.70 + min。
  • upperActionLimit: [float] 上的上限或者负值,如果不需要,则为负值。 默认值为( 最大最小值) * 0.85 + min。
  • needleColor: [#rrggbb]的指针颜色。 默认值为" #444444"。
  • optimumRangeColor: [#rrggbb] 最佳范围颜色。 默认值为" #44ff44"。
  • warningRangeColor: [#rrggbb] 警告范围颜色。 默认值为" #ffff00"。
  • actionRangeColor: [#rrggbb] 操作范围颜色。 默认值为" #ff4444"。

更强大的初始化初始化代码可以如下所示:

<script>
 window.onload = function(){
 var gauge2 = new GaugeSVG({
 id: "container2", 
 value: 49,
 valueColor: "#444488",
 min: 30,
 max: 70,
 minmaxColor: "#444488",
 title: "Gauge 2",
 titleColor: "#8888cc",
 label: "m³/h (passage)",
 labelColor: "#8888cc",
 gaugeWidthScale: 1.25,
 gaugeBorderColor: "#222244",
 gaugeBorderWidth: 1.5,
 gaugeShadowColor: "#444488",
 gaugeShadowScale: 1.35,
 canvasBackColor: "#f8eeff",
 gaugeBackColor: "#ccccff",
 needleColor: "#8888cc",
 lowerActionLimit: 0, // Use '0' to disable. A '-1' is obsolete with version 2.0. lowerWarningLimit: 0, // Use '0' to disable. A '-1' is obsolete with version 2.0. upperWarningLimit: 0, // Use '0' to disable. A '-1' is obsolete with version 2.0. upperActionLimit: 0, // Use '0' to disable. A '-1' is obsolete with version 2.0. });
 };
</script> 

Points of Interest

SVG注入

gaugeSVG 开发的一个有趣方面是使用JavaScript将SVG节点动态注入到DOM中。 实现这一目标的第一步是在dom容器的div 中创建SVG画布。

// Determine drawing container.var container = document.getElementById(params.id);
...// Create SVG canvas.this.canvas = document.createElementNS(svgns, "svg");this.canvas.setAttributeNS(null, 'version', "1.1");this.canvas.setAttributeNS(null, 'width', "100%");this.canvas.setAttributeNS(null, 'height', "100%");this.canvas.setAttributeNS(null, 'style', "overflow: hidden; position: relative;
 left: -0.5px; top: -0.5px;");
container.appendChild(this.canvas);

下一步是将SVG节点插入到SVG画布,比如,background rectangle。

// Draw canvas background.this.rectBG = document.createElementNS(svgns, 'rect');this.rectBG.setAttributeNS(null, 'stroke', "none");this.rectBG.setAttributeNS(null, 'fill', this.config.canvasBackColor);this.rectBG.setAttributeNS(null, 'x', this.config.offsetX);this.rectBG.setAttributeNS(null, 'y', this.config.offsetY);this.rectBG.setAttributeNS(null, 'width', this.config.canvasW);this.rectBG.setAttributeNS(null, 'height', this.config.canvasH);this.canvas.appendChild(this.rectBG); 

注意 createElementNSsetAttributeNSappendChild的调用,并注意正确的对象调用方法,并作为参数传递。

SVG文本

在SVG画布中绘制文本有点困难。 这是因为DOM节点在SVG节点中的令人惊讶的嵌套。

// Draw current value.this.gaugeVAL = document.createElementNS(svgns, 'text');this.gaugeVAL.setAttributeNS(null, 'x', this.config.offsetX + this.config.canvasW/2.0);this.gaugeVAL.setAttributeNS(null, 'y', this.config.offsetY + this.config.canvasH/1.2);this.gaugeVAL.setAttributeNS(null, 'style', "font-family:Arial,Verdana; font-size:" +
 Math.floor(this.config.canvasW/8) + "px; font-weight:bold; fill-opacity:1.0; fill:" +
 this.config.valueColor + "; text-anchor:middle;");this.gaugeVAL.appendChild(document.createTextNode(this.config.originalValue));this.canvas.appendChild(this.gaugeVAL); 

请注意,DOM文本节点( document.createTextNode(this.config.originalValue) ) 必须创建为SVG文本节点的子( this.gaugeVAL.appendChild(...); )。

更新

同样,在HTML文档的标准生命周期/显示期间,可能会更新针位置,以显示连续测量的最新值。 这可以通过 refresh()gaugeSVG 方法来完成。 因为DOM节点和SVG节点的属性可以使用JavaScript操作,所以可以很容易地实现生命周期更新。 对于值文本,必须使用新值文本设置SVG文本节点的唯一DOM文本子节点。 对于针,'d' 属性必须用新路径更新。

this.gaugeVAL.childNodes[0].textContent = this.config.value;this.gaugeNDL.setAttributeNS(null, 'd', this.calculateNeedlePath(...));

这种方法不仅是最简单的方法,而且还回收了已经存在的DOM和SVG节点,避免了闪烁。

动画

针位置的更新可以设置动画,如果 gaugeSVG.refresh(valueNew, animated) 参数 animated 设置为 true。 动画使用javascript的setTimeout。 为了实现视觉上吸引人的动画, this.animation.startIncrementDivisor 定义从上次针位置到新针位置的24th 部分,作为初始增量步骤。 每个增量步骤都将用 15毫秒的延迟 this.animation.delay 绘制。

为了模拟下降的指针速度,增量步骤通过值的乘法来减少 this.animation.decreaseOfIncrementValue 0.966.为防止无限动画,增量步骤的总数限制为 48的值 this.animation.maxIncrements

这些 this.animation.* 值适用于更新间隔不小于 2秒的间隔。 更快的更新时,不应该执行动画或者必须修改值。 任何适应性需要广泛的测试。

注意 setTimeout() 调用的任何函数都将保留指针的gaugeSVGthis的上下文。 要使用指针的gaugeSVG 提供超时函数的第一次调用,必须创建一个显式引用。 所有后续调用都可以移交这里引用。

// At that time, the timed out function will be called, the context,// where 'this' pointer is known to, is no longer valid. var gauge = this;
setTimeout(function()
 {
 GaugeAnimationStep(gauge, oldValue, incrementValue, gauge.animation.maxIncrements);)
 }, gauge.animation.delay);

阴影/渐变

可以用阴影效果绘制 background。 这是用径向渐变实现的。 任何渐变都是定义SVG节点的一部分: document.createElementNS(svgns, 'defs') 所有定义SVG节点都通过完整的文档透明。 因此,如果在单个文档中显示多个表,则梯度定义必须区分: setAttributeNS(null, 'id', this.config.id +"_gradient")

// Create gradient.if (this.config.showGaugeShadow == true)
{
 this.gradients = document.createElementNS(svgns, 'defs');
 this.gradients.setAttributeNS(null, 'id', "gradients");
 this.gradient = document.createElementNS(svgns, 'radialGradient');
 this.gradients.appendChild(this.gradient);
 this.gradient.setAttributeNS(null, 'id', this.config.id + "_gradient");
 this.gradient.setAttributeNS(null, 'cx', "50%");
 this.gradient.setAttributeNS(null, 'cy', "50%");
 this.gradient.setAttributeNS(null, 'r', "100%");
 this.gradient.setAttributeNS(null, 'fx', "50%");
 this.gradient.setAttributeNS(null, 'fy', "50%");
 this.gradient.setAttributeNS(null, 'gradientTransform', "scale(1 2)");
 this.grad1sub1 = document.createElementNS(svgns, 'stop');
 this.gradient.appendChild(this.grad1sub1);
 this.grad1sub1.setAttributeNS(null, 'offset', "15%");
 this.grad1sub1.setAttributeNS(null, 'style', "stop-color:" +
 this.config.gaugeShadowColor + ";stop-opacity:1");
 this.grad1sub2 = document.createElementNS(svgns, 'stop');
 this.gradient.appendChild(this.grad1sub2);
 this.grad1sub2.setAttributeNS(null, 'offset',
 this.config.gaugeShadowScale * 33 + "%");
 this.grad1sub2.setAttributeNS(null, 'style', "stop-color:" +
 this.config.gaugeBackColor + ";stop-opacity:1");
 this.canvas.appendChild(this.gradients);
}

应将径向梯度绘制为应用于它的所应用的路径的径向 background 路径。 最外层颜色环的中心将 relative 设置为路径: setAttributeNS(null,'cx',"50%")setAttributeNS(null,'cy',"50%") 最内层的颜色环也将 relative 设置为路径: setAttributeNS(null,'fx',"50%")setAttributeNS(null,'fy',"50%"),因为计量 background的路径有 2: 1的width:height 比,径向梯度看起来是椭圆形的。 要确定精确的圆形渐变,应采用 1: 2的比例比例: setAttributeNS(null, 'gradientTransform',"scale(1 2)") 渐变中心与渐变边界之间的颜色从最内层颜色到最外层颜色的分布不均匀。 从中心到边界的淡入度从 15%开始 setAttributeNS(null, 'offset',"15%") 最后从 gaugeShadowScale 开始 setAttributeNS(null, 'offset', this.config.gaugeShadowScale * 33 +"%")

梯度的定义之后,可以应用。

// Draw gauge background.this.gaugeBG = document.createElementNS(svgns, 'path');this.gaugeBG.setAttributeNS(null, 'stroke', this.config.gaugeBorderColor);this.gaugeBG.setAttributeNS(null, 'stroke-width', this.config.gaugeBorderWidth);if (this.config.showGaugeShadow == true)
{
 this.gaugeBG.setAttributeNS(null, 'fill', "url(#" + this.config.id + "_gradient)");
}else{
 this.gaugeBG.setAttributeNS(null, 'fill', this.config.gaugeBackColor);
}

gaugeSVG 提供乐趣 !

历史记录

  • 本文的第一个版本来自 06月18日 2013.
  • 12月15日 2014的第二个版本更新了JavaScript源代码以支持负数显示范围,比如 从最小值: -80至最大:-20,使用 lowerActionLimit: -50和 upperActionLimit: -30.
  • 10月6日 2015的第二个版本修补程序更新JavaScript源来修复从负值到正值的问题,以及禁用的警告限制。

WEB  DASH  Dashboard  通用  Gauge  
相关文章