hHw自定义简易饼图栏

时间:2016-11-02 06:42:29

标签: javascript css

如何在简易饼图中自定义条形尺寸/比例尺寸?我这样做但我需要更多细条。我自定义百分比和其他选项,但无法找到自定义条形的方法。

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);

0 个答案:

没有答案