多个径向进度表 (js)
multiple radial-progress charts (js)
我正在尝试重新创建和更新此 fiddle。我可以创建一个单独的图表,但无法实现第二个进度。
The second chart
<div id="radial-progress-vha">
<div class="circle-vha">
<div class="mask-vha full-vha">
<div class="fill-vha"></div>
</div>
<div class="mask-vha half-vha">
<div class="fill-vha"></div>
<div class="fill-vha fix-vha"></div>
</div>
<div class="shadow-vha"></div>
</div>
<div class="inset-vha">
<div class="percentage-vha">22.17</div>
</div>
</div>
我的理解是每张图都应该是唯一的,因此我用不同的名称复制了原始的 css。这是where它崩溃了。
The js
var transform_styles = ['-webkit-transform', '-ms-transform', 'transform'];
window.randomize = function() {
var rotation = Math.floor((180)*.123);
var fix_rotation = rotation;
for(i in transform_styles) {
$('.circle .fill, .circle .mask.full').css(transform_styles[i],'rotate(' + rotation + 'deg)');
//$('.circle .mask.left').css(transform_styles[i], 'rotate(' + rotation + 'deg)');
$('.circle .fill.fix').css(transform_styles[i],'rotate(' + fix_rotation + 'deg)');
}
}
setTimeout(window.randomize, 200);
$('#radial-progress-vha');
我有一个工作 fiddle: http://jsfiddle.net/uouxcLbd/
您的主要问题是
- 您不需要复制
transform-styles
的定义
$('#radial-progress-va');
和 $('#radial-progress-vha');
行是不必要的
window.randomize
的第二个定义需要不同的名称
- 第二个
randomize
函数需要使用带有 -vha
后缀的 css 类
- 您在 CSS 中输入错误 - 它缺少一个
.
,因此 .fill-vha
选择器不起作用
我正在尝试重新创建和更新此 fiddle。我可以创建一个单独的图表,但无法实现第二个进度。
The second chart
<div id="radial-progress-vha">
<div class="circle-vha">
<div class="mask-vha full-vha">
<div class="fill-vha"></div>
</div>
<div class="mask-vha half-vha">
<div class="fill-vha"></div>
<div class="fill-vha fix-vha"></div>
</div>
<div class="shadow-vha"></div>
</div>
<div class="inset-vha">
<div class="percentage-vha">22.17</div>
</div>
</div>
我的理解是每张图都应该是唯一的,因此我用不同的名称复制了原始的 css。这是where它崩溃了。
The js
var transform_styles = ['-webkit-transform', '-ms-transform', 'transform'];
window.randomize = function() {
var rotation = Math.floor((180)*.123);
var fix_rotation = rotation;
for(i in transform_styles) {
$('.circle .fill, .circle .mask.full').css(transform_styles[i],'rotate(' + rotation + 'deg)');
//$('.circle .mask.left').css(transform_styles[i], 'rotate(' + rotation + 'deg)');
$('.circle .fill.fix').css(transform_styles[i],'rotate(' + fix_rotation + 'deg)');
}
}
setTimeout(window.randomize, 200);
$('#radial-progress-vha');
我有一个工作 fiddle: http://jsfiddle.net/uouxcLbd/
您的主要问题是
- 您不需要复制
transform-styles
的定义
$('#radial-progress-va');
和$('#radial-progress-vha');
行是不必要的window.randomize
的第二个定义需要不同的名称- 第二个
randomize
函数需要使用带有-vha
后缀的 css 类 - 您在 CSS 中输入错误 - 它缺少一个
.
,因此.fill-vha
选择器不起作用