我有一个小的 JavaScript AJAX 脚本，可以获取 kbps 或其他单位的进度速度 - 比如说 MB/s。现在我想添加一个以图形方式显示速度的仪表。
我会有一张包含仪表设计的图像和另一张带有指针的图像。指针默认指向顶部 - 最低值为 -120 度，最高为 120 度。但如果有人有 1mb 连接那就不好了，所以我需要添加指数计算。
这是值...
- 0-1MB:-120° -> -90°
- 1-5MB:-90° -> -60°
- 5-10MB:-60° -> -30°
- 10-20MB:-30deg -> 0deg
- 20-30MB:0deg -> 30deg
- 30-50MB:30° -> 60°
- 50-75MB:60 度 -> 90 度
- 75-100MB:90 度 -> 120 度
我完全不知道如何开始计算。
动画由CSS完成
-webkit-transform:rotate(Xdeg)
它将更新
xhr.onprogress
获得速度的计算方法是:
kb/s=((e.loaded/((new Date()-start)/1000))/1024).toFixed(2),
MB/S=(d/1024*8).toFixed(2)
当我有 MB/s 时，我只想设置仪表度数。
我怎样才能实现这些值(value)观？
这是一个不完全工作的变体。我用 while 写的，但我认为这不是正确的方法。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>gauge</title>
<style>
img{position:fixed;top:100px;left:100px;}
</style>
<script>
var b=[1,5,10,20,30,50,75,100,150],
deg=30;
get=function(a){
var l=b.length
while(l--){
if(b[l]<=a&&a<b[l+1]){
rotation=((l*deg)+(deg/(b[l+1]-b[l])*(a-b[l])));
pointer=document.getElementsByTagName('img')[1]
pointer.style['-webkit-transform']='rotate('+(rotation-120)+'deg)';
console.log(rotation)
}
}
}
</script>
</head>
<body>
<input onChange="get(this.value)">
<img src="gauge1.png"><img src="pointer.png">
</body>
</html>
它不适用于小于 5 和大于 150 的值。
编辑 这是我需要的工作代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>gauge</title>
<style>
img{position:fixed;top:100px;left:100px;}
.pointer{-webkit-transform:rotate(-120deg);}
input{width:100%;}
</style>
<script>
var pointer,
get=function(a){
var b=[0,1,5,10,20,30,50,75,100],l=b.length,c=30,x=-120;
if(a>=b[l-1]){
x=120;
}else{
while(l--){
if(b[l]<a&&a<=b[l+1]){
x=(c*l-120)+c*((a-b[l])/(b[l+1]-b[l]));
break;
}
}
}
pointer.style['-webkit-transform']='rotate('+x+'deg)';
}
window.onload=function(){
pointer=document.getElementsByClassName('pointer')[0];
}
</script>
</head>
<body>
<img src="gauge1.png"><img class="pointer" src="pointer.png">
<input type="range" min="0" max="100" value="0" onChange="get(this.value)" step="0.1">
</body>
</html>
最佳答案
制定符合您规范的指数函数
设 d 为 [-120 , 120] 范围内的度数。
令 f(d) 为下载速度(以 MB/S 为单位)，其中 f(d) = a * RATEd + b。
设 MIN 和 MAX 分别为 -120 度和 120 度对应的下载速度。
然后我们有以下两个方程。
MIN = f(-120) = a * 速率-120 + b
最大值 = f(120) = a * 速率120 + b
我们可以按如下方式求解 a 和 b。
最大值 - 最小值 = a * (速率120 - 速率-120)
=> a =(最大值 - 最小值)/(速率120 - 速率-120)
=> b = 最小值 - a * 速率-120
现在您选择“最小值”、“最大值”和“速率”。您将使用函数 s(d) 的反函数将以 MB/S 为单位的速度映射为以度为单位的值。
d = f-1(s) = log速率((s - b)/a)
<小时/>神奇公式可供使用
如果您选择 MIN = 0.1 MB/S = 100 kB/S、MAX = 100 MB/S 且 RATE = 1.011662，您也会得到 f-1(20) = 0。函数就变成了这样:
d = f-1(s) = log1.011662 ((s + 6.488681037)/26.48810966)
它看起来像这样:
注意所经过的三个关键点:
- (0.1 MB/S，-120 度)
- (20 MB/S，0 度)
- (100 MB/S，120 度)
在 JavaScript 中，公式如下所示:
d = Math.log((s + 6.488681037) / 26.48810966) / Math.log(1.011662)
其中 s 是以 MB/S 为单位的速度，d 是您应该使用的度数。
关于javascript - JavaScript 中的指数规计算，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18214091/