如何在简易饼图中自定义条形尺寸/比例尺寸?我这样做但我需要更多细条。我自定义百分比和其他选项,但无法找到自定义条形的方法。
HTML:
<div class="row">
<div class="pie-chart-area"><!-- pie-chart-area-start-->
<div class="col-md-2" >
<span class="chart" data-percent="75">
<span class="percent"></span>
</span>
<h1>web design</h1>
</div>
<div class="col-md-2" >
<span class="chart" data-percent="92">
<span class="percent"></span>
</span>
<h1>web development</h1>
</div>
<div class="col-md-2" >
<span class="chart" data-percent="68">
<span class="percent"></span>
</span>
<h1>speed optimization</h1>
</div>
<div class="col-md-2" >
<span class="chart" data-percent="100">
<span class="percent"></span>
</span>
<h1>customer support</h1>
</div>
<div class="col-md-2" >
<span class="chart" data-percent="83">
<span class="percent"></span>
</span>
<h1>marketing</h1>
</div>
<div class="col-md-2" >
<span class="chart" data-percent="50">
<span class="percent"></span>
</span>
<h1>advertisement</h1>
</div>
</div><!-- pie-chart-area-end-->
</div>
my css:::::
.pie-chart-area {
}
.pie-chart-area h1 {
color: #8a8a8a;
font-size: 13px;
font-weight: normal;
text-align: center;
text-transform: uppercase;
}
/***pie-chart-css***/
.chart {
position: relative;
display: inline-block;
width: 110px;
height: 110px;
margin-top: 50px;
margin-bottom: 50px;
text-align: center;
}
.chart canvas {
position: absolute;
top: 0;
left: 0;
}
.percent {
display: inline-block;
line-height: 150px;
margin-left: 42px;
z-index: 2;
}
.percent:after {
content: '%';
margin-left: 0.1em;
font-size: .8em;
}
/ 饼图-CSS /
JS ::::
(function($){
jQuery(document).ready(function(){
$('.chart').easyPieChart({
easing: 'easeOutCirc',
barColor: '#1abc9c',
trackColor: '#f9f9f9',
scaleColor:false,
scaleLength: 5,
percent: 75,
lineCap: 'round',
lineWidth: 15, //12
size: 150, //110
animate: {duration: 2000, enabled: true},
onStep: function (from, to, percent) {
$(this.el).find('.percent').text(Math.round(percent));
}
});
});
})(jQuery);