如何将文本置于甜甜圈孔饼图中间?

时间:2015-03-19 19:36:44

标签: javascript css charts easypie

我想创建一个甜甜圈孔饼图来表示我的数据。 我偶然发现了这个网站: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>

这是我的结果......

enter image description here

1 个答案:

答案 0 :(得分:0)

我能够通过稍作修改使其居中:

  • 在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/