質問編集履歴
2
文章を修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
jQuery のAnimationを使ったJavascript [JQMeter](https://github.com/glarios/jQMeter)JQMeterを、phpでLoopさせて複数のグラフを表示させたいと思っています。
|
|
2
2
|
[動作デモ](http://www.gerardolarios.com/plugins-and-tools/jqmeter/#demo)
|
|
3
3
|
|
|
4
|
-
棒グラフを０からカウントアップさせるのですが、そこに表示される数字の単位は%となっており、ここに、グラフに変数を与え、数字と共に表示させたいと思い、
|
|
4
|
+
棒グラフを０からカウントアップさせるのですが、そこに表示される数字の単位は%となっており、ここに、グラフに毎に変数を与え、数字と共に表示させたいと思っています。以下の様に、単位（tani）という変数を与え、%を変数に置き換え、グラフ単体では問題なく表示されました。
|
|
5
5
|
```Javascript
|
|
6
6
|
$({ Counter: 0 }).animate({ Counter: $(elem).children('.outer-therm').children('.inner-therm').children().text() }, {
|
|
7
7
|
duration : counterSpeed,
|
|
@@ -21,9 +21,9 @@
|
|
|
21
21
|
step : function() {
|
|
22
22
|
$(elem).children('.outer-therm').children('.inner-therm').children().text(Math.ceil(this.Counter) + tani);
|
|
23
23
|
```
|
|
24
|
-
|
|
24
|
+
|
|
25
|
-
これをLOOPで複数作成すると、単位(tani）がすべてのグラフで、一番最後に与えらえた
|
|
25
|
+
しかし、これをLOOPでグラフを複数作成しようとすると、単位(tani）がすべてのグラフで、一番最後に与えらえた値になってしまいます。
|
|
26
|
-
|
|
26
|
+
この、単位(tani)以外の変数は、それぞれのグラフに与えた値で処理されています。
|
|
27
27
|
|
|
28
28
|
|
|
29
29
|
[javascriptでループの中に関数があると変数が最後の値になるよ？](http://html555.sblo.jp/article/63378379.html)
|
1
コードの間違いを修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
width = options.width;
|
|
65
65
|
height = options.height;
|
|
66
66
|
bgColor = options.bgColor;
|
|
67
|
-
tani = options.tani;
|
|
67
|
+
tani = options.tani;//これを追加
|
|
68
68
|
meterOrientation = options.meterOrientation;
|
|
69
69
|
animationSpeed = options.animationSpeed;
|
|
70
70
|
counterSpeed = options.counterSpeed;
|
|
@@ -89,7 +89,6 @@
|
|
|
89
89
|
$(elem).children('.outer-therm').children('.inner-therm').animate({height : total + '%'},animationSpeed);
|
|
90
90
|
|
|
91
91
|
} else {
|
|
92
|
-
Z
|
|
93
92
|
$(elem).html('<div class="therm outer-therm"><div class="therm inner-therm"><span style="display:none;">' + total + '</span></div></div>');
|
|
94
93
|
$(elem).children('.outer-therm').attr('style','width:' + width + ';height:' + height + ';background-color:' + bgColor);
|
|
95
94
|
$(elem).children('.outer-therm').children('.inner-therm').attr('style','background-color:' + barColor1 + ';height:' + height + ';width:0');
|
|
@@ -116,7 +115,7 @@
|
|
|
116
115
|
duration : counterSpeed,
|
|
117
116
|
easing : 'swing',
|
|
118
117
|
step : function() {
|
|
119
|
-
$(elem).children('.outer-therm').children('.inner-therm').children().text(Math.ceil(this.Counter) + tani);
|
|
118
|
+
$(elem).children('.outer-therm').children('.inner-therm').children().text(Math.ceil(this.Counter) + tani);//ここを変更
|
|
120
119
|
}
|
|
121
120
|
});
|
|
122
121
|
}
|