javascript - 使用 Javascript/jQuery 创建简单的 donut chart

Question

我知道这是堆栈溢出的不好做法，在没有任何代码尝试的情况下提出问题，但我是一个 JavaScript 新手，不知道从哪里开始，但我正在寻找一个 super 简单的 donut chart ，看起来像这样:



仅显示 1 个扇区(100 的百分比)。

我搜索了堆栈溢出并遇到了一个关于圆环图的问题，但给出的解决方案非常复杂(多个扇区和使用按钮动态更改图表的能力):

http://jsfiddle.net/philippkuehn/jDLux/

<div class="wrapper">
<div class="donutchart">
    <div class="graph"></div>
    <div class="graph-center"></div>
</div>
<div class="buttons">
    <a class="button button-active" href="#" data-id="0">1</a>
    <a class="button" href="#" data-id="1">2</a>
    <a class="button" href="#" data-id="2">3</a>
</div>

对不起，我找不到我找到这个答案的问题，但那个 fiddle 不是我的工作要清楚。

任何人都可以给我一个非常简单的解决方案来解决这个问题，无论是 fiddle 还是教程(尽管我发现的所有解决方案都是针对非常复杂的圆环图或饼图，我只需要一个非常简单的实现)。

再次抱歉，我没有自己尝试过这段代码，但就像我说的那样，我是 javascripting 的新手。

谢谢你的帮助

乔恩

Answer 1

尝试使用 CSS 中的饼图并使用 Javascript 进行调整。
这里有一些很酷的:
http://speckyboy.com/2010/11/04/10-awesome-pure-css-graph-and-chart-techniques/