Как центрировать текст в середине круговой диаграммы дырки от бублика?

Я хочу создать круговую диаграмму для пончиков, чтобы представить мои данные. Я наткнулся на этот сайт: http://rendro.github.io/easy-pie-chart/. Я следую их указаниям до самого конца. Я близок к тому, чтобы заставить его работать, но я не знаю, как центрировать текст в середине моей круговой диаграммы.

Может ли кто-нибудь помочь мне с этим?

Это то, что я до сих пор.

    <div class="chart_1" data-percent="90" >
        <span>6</span>
    </div>

    <script type="text/javascript">
        $(function() {
            $('.chart_1').easyPieChart({

                             //Configuration goes here
                             easing: 'easeOutElastic',
                             delay: 3000,
                             barColor: '62ae41',
                             scaleColor: false,
                             lineWidth: 10,
                             trackWidth: 10,
                             animate: false,
                             lineCap: 'square',

                            });
        });
    </script>

Вот мой результат...

1 ответ

Решение

Я смог отцентрировать его с небольшой модификацией:

  • добавил "#" в barColor
  • убрал запятую

    $(function() {
        $('.chart_1').easyPieChart({
            //Configuration goes here
            easing: 'easeOutElastic',
            delay: 3000,
            barColor: '#62ae41',
            scaleColor: false,
            lineWidth: 10,
            trackWidth: 10,
            animate: false,
            lineCap: 'square'
        });
    });
    

http://jsfiddle.net/imamathwiz/gu3aL84e/

Другие вопросы по тегам