多条形图主要背景填充选项,涵盖加载栏,如何修复?



我正在使用谷歌翻译,所以可能会出现错误。

我的问题是:当我添加一个带有"fillColor:"#f4f5f9"的参数时,轮子覆盖了多条形的一个元素。

我使用从以下页面从 4 转换为 2 多个柱线: https://github.com/pguso/jquery-plugin-circliful

原始脚本中也会出现相同的问题。 原版演示:https://jsfiddle.net/0c8qaqaj/41/

下面的图片显示了当前的情况以及我想要实现的目标。

http://samefakty.pl/plik.jpg

<div class="row">
<div class="col-lg-2">
<div id="test-circle6">
<div id="textInner">
<div>3h 20'</div>
<div>2h</div>
</div>
</div>
<div id="test-circle7">
<div id="textInner">
<div>4h 35'</div>
<div>3h 20'</div>
</div>
</div>          
</div>
</div>
<script>
$( document ).ready(function() { // 6,32 5,38 2,34
$("#test-circle6").circliful({
animation: 1,
animationStep: 5,
foregroundBorderWidth: 10,
backgroundBorderWidth: 20,
textSize: 28,
textStyle: 'font-size: 12px;',
textColor: '#666',
multiPercentage: 1,
percentages: [
{'percent': 32, 'color': '#e94e25'},
{'percent': 20, 'color': '#878786'}
],
multiPercentageLegend: 1,
replacePercentageByText: '',
backgroundColor: 'none',
fillColor: 'none',
icon: 'none',
iconPosition: 'middle'
});
$("#test-circle7").circliful({
animation: 1,
animationStep: 5,
foregroundBorderWidth: 10,
backgroundBorderWidth: 20,
textSize: 28,
textStyle: 'font-size: 12px;',
textColor: '#666',
multiPercentage: 1,
percentages: [
{'percent': 43, 'color': '#e94e25'},
{'percent': 32, 'color': '#878786'}
],
multiPercentageLegend: 1,
replacePercentageByText: '',
backgroundColor: 'none',
fillColor: '#f4f5f9',
icon: 'none',
iconPosition: 'middle'
});     
});
</script>

我试图修复它,但我不能,请给我一个提示或帮助解决它。

谢谢你,最诚挚的问候。

好的,所以在查看代码后,似乎填充颜色会递归地添加带有颜色的圆圈。接近的解决方案是使用 jquery 本身隐藏fillColor 圆圈,而不是 1st。

只需将其添加到jquery文档选择器的末尾

$("[fill='red']").slice(1).css("display", "none");

将红色替换为填充颜色值

结帐 https://jsfiddle.net/52z0paw1/

最新更新