blocks|key|814833|text|我喜欢前面的答案，但我觉得它缺乏代码清晰度，也没有真正涵盖如何利用标签。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|814834|为了便于声明，我将这些值移动到一个数据对象数组中。其他值，比如percentage，我显式声明为数据对象上的属性，或单独的变量。我认为，这会让它更容易阅读。|814835|重构还使得将值绑定到输入框变得更容易，如果您感兴趣的话。|814836|要理解我的意思并使用这些值，请查看这个CodePen：http://codepen.io/zfrisch/pen/pRbZeb|offset|length|814837|​|814838|++var+data+=+[{
++++label:+"one",
++++value:+100,
++++color:+'white'
++},+{
++++label:+"two",
++++value:+100,
++++color:+'skyBlue'
++},+{
++++label:+"three",
++++value:+100,
++++color:+'yellow'
++}];

++var+total+=+0;
++for+(obj+of+data)+{
++++total+%2B=+obj.value;
++}

++var+canvas+=+document.getElementById('myCanvas');
++var+ctx+=+canvas.getContext('2d');
++var+previousRadian;
++var+middle+=+{
++++x:+canvas.width+/+2,
++++y:+canvas.height+/+2,
++++radius:+canvas.height+/+2,
++};
++
+++//background
++ctx.beginPath();
++ctx.arc(middle.x,+middle.y,+middle.radius,+0,+2+*+Math.PI);
++ctx.closePath();
++ctx.stroke();
++ctx.fillStyle+=+"black";
++ctx.fill();
+++//end+of+background

++for+(obj+of+data)+{
++++previousRadian+=+previousRadian+%7C%7C+0;
++++obj.percentage+=+parseInt((obj.value+/+total)+*+100)
++++
++++ctx.beginPath();
++++ctx.fillStyle+=+obj.color;
++++obj.radian+=+(Math.PI+*+2)+*+(obj.value+/+total);
++++ctx.moveTo(middle.x,+middle.y);
++++//middle.radius+-+2+is+to+add+border+between+the+background+and+the+pie+chart
++++ctx.arc(middle.x,+middle.y,+middle.radius+-+2,+previousRadian,+previousRadian+%2B+obj.radian,+false);
++++ctx.closePath();
++++ctx.fill();
++++ctx.save();
++++ctx.translate(middle.x,+middle.y);
++++ctx.fillStyle+=+"black";
++++ctx.font+=+middle.radius+/+10+%2B+"px+Arial";
++++ctx.rotate(previousRadian+%2B+obj.radian);
++++var+labelText+=+"'"+%2B+obj.label+%2B+"'+"+%2B+obj.percentage++%2B+"%25";
++++ctx.fillText(labelText,+ctx.measureText(labelText).width+/+2,+0);
++++ctx.restore();

++++previousRadian+%2B=+obj.radian;
++}|code-block|syntax|javascript|814839|<canvas+id="myCanvas"+width="500"+height="500"+></canvas>|814840|814841|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/zfrisch/pen/pRbZeb^0|0|0|0|R|10|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|13|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|14|8|@]|9|@$H|15|I|16|1|17]]|A|$]]|$1|J|3|K|5|6|7|18|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|19|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|N|7|1A|8|@]|9|@]|A|$O|P]]|$1|S|3|K|5|6|7|1B|8|@]|9|@]|A|$]]|$1|T|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|U|$V|$5|W|X|Y|A|$Z|10]]]]

I like the previous answer, but I felt it was lacking in code clarity and it didn't really cover how to utilize labels. 

I moved the values into a data object array for easy declaration. Other values, like percentage, I explicitly declared as a property on the data object, or as a separate variable. This, I think, makes it easier to read.

The refactoring also made it easier to tie the values to input boxes if that's something you're interested in.

To see what I mean and play with the values check out this CodePen: <a href="http://codepen.io/zfrisch/pen/pRbZeb" rel="noreferrer">http://codepen.io/zfrisch/pen/pRbZeb</a>

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code> var data = [{
 label: "one",
 value: 100,
 color: 'white'
 }, {
 label: "two",
 value: 100,
 color: 'skyBlue'
 }, {
 label: "three",
 value: 100,
 color: 'yellow'
 }];

 var total = 0;
 for (obj of data) {
 total += obj.value;
 }

 var canvas = document.getElementById('myCanvas');
 var ctx = canvas.getContext('2d');
 var previousRadian;
 var middle = {
 x: canvas.width / 2,
 y: canvas.height / 2,
 radius: canvas.height / 2,
 };
 
 //background
 ctx.beginPath();
 ctx.arc(middle.x, middle.y, middle.radius, 0, 2 * Math.PI);
 ctx.closePath();
 ctx.stroke();
 ctx.fillStyle = "black";
 ctx.fill();
 //end of background

 for (obj of data) {
 previousRadian = previousRadian || 0;
 obj.percentage = parseInt((obj.value / total) * 100)
 
 ctx.beginPath();
 ctx.fillStyle = obj.color;
 obj.radian = (Math.PI * 2) * (obj.value / total);
 ctx.moveTo(middle.x, middle.y);
 //middle.radius - 2 is to add border between the background and the pie chart
 ctx.arc(middle.x, middle.y, middle.radius - 2, previousRadian, previousRadian + obj.radian, false);
 ctx.closePath();
 ctx.fill();
 ctx.save();
 ctx.translate(middle.x, middle.y);
 ctx.fillStyle = "black";
 ctx.font = middle.radius / 10 + "px Arial";
 ctx.rotate(previousRadian + obj.radian);
 var labelText = "'" + obj.label + "' " + obj.percentage + "%";
 ctx.fillText(labelText, ctx.measureText(labelText).width / 2, 0);
 ctx.restore();

 previousRadian += obj.radian;
 }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="myCanvas" width="500" height="500" &gt;&lt;/canvas&gt;</code></pre>
</div>
</div>

blocks|key|599461|text|我以前也遇到过同样的问题，但后来我解决了这个问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|599462|我遗漏的是，我在上下文中绘制了一个拱门，并试图填充它，由于颜色在整个圆圈中扩散，因为现在上下文仅在从拱门的中心到起点的半径线和拱门之间绑定。|599463|但是没有其他的边界，从拱顶的末端到中心的线，只要我用下面的方法画出这条线：|599464|ctx.lineTo(center+coordinates+of+circle);|code-block|syntax|javascript|599465|我有一个完整的饼的边界，所以现在如果我在上下文中填充颜色，它将不会在整个圆圈内扩散，而是仅限于该饼。|599466|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|R|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I had the same problem before but I was able to solve this problem later. 

What I was missing was I was drawing an arch in context and was trying to fill it, due to which the color was spreading all across the circle because now the context was bound only between a radius line from center to the starting point of arch and the arch to bound the context. 

But there was no other boundary the line from the end of arch to the center, as soon as I draw that line using the following:

<pre><code>ctx.lineTo(center coordinates of circle);
</code></pre>

I have a complete boundary of a pie, so now if I fill the color in context it will not get spread inside the whole circle but will be limited to that pie.

blocks|key|599643|text|这是一个不使用外部库，使用html5画布的饼图：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|599644|​|599645|📷|atomic|offset|length|599646|599647|See+the+code|599648|但最好是使用库来绘制图表。在apex-charts中，有一个名为sparkline的选项，它可以帮助您删除多余的东西，并绘制一个最小且干净的图表。|style|CODE|599649|这是一个使用apex-charts库的干净的甜甜圈图表。(使用sparkline选项删除多余的内容)：|599650|599651|599652|599653|var+options+=+{
++series:+[620,+40],
++labels:+['Finished',+'Unfinished'],
++chart:+{
++++type:+'donut',
++++sparkline:+{
++++++enabled:+true,
++++}
++},
++plotOptions:+{
++++pie:+{
++++++donut:+{
++++++++labels:+{
++++++++++show:+true,
++++++++++total:+{
++++++++++++showAlways:+false,
++++++++++++show:+true,
++++++++++++label:+'Total'
++++++++++}
++++++++}
++++++}
++++}
++},
};
var+chart+=+new+ApexCharts(document.querySelector("#chart"),+options);
chart.render();|code-block|syntax|javascript|599654|See+it+on+codepen|599655|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/05ec1fe92f476141498eb765c4aab2c9.png|imageAlt|1|LINK|MUTABLE|url|http://jsfiddle.net/ya3ya6/yd3rzo42/|2|https://ask.qcloudimg.com/http-save/yehe-900000/0627d2d6cf162adb2136ea8e570f5c1a.png|3|https://codepen.io/ya3ya6/pen/vYGZBmj^0|0|0|0|1|0|0|0|0|C|1|0|E|B|W|9|0|6|B|V|9|0|0|0|1|2|0|0|0|0|H|3|0^^$0|@$1|2|3|4|5|6|7|1J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1K|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1L|8|@]|9|@$G|1M|H|1N|1|1O]]|A|$]]|$1|I|3|C|5|6|7|1P|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1Q|8|@]|9|@$G|1R|H|1S|1|1T]]|A|$]]|$1|L|3|M|5|6|7|1U|8|@$G|1V|H|1W|N|O]|$G|1X|H|1Y|N|O]]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1Z|8|@$G|20|H|21|N|O]|$G|22|H|23|N|O]]|9|@]|A|$]]|$1|R|3|C|5|6|7|24|8|@]|9|@]|A|$]]|$1|S|3|E|5|F|7|25|8|@]|9|@$G|26|H|27|1|28]]|A|$]]|$1|T|3|C|5|6|7|29|8|@]|9|@]|A|$]]|$1|U|3|V|5|W|7|2A|8|@]|9|@]|A|$X|Y]]|$1|Z|3|10|5|6|7|2B|8|@]|9|@$G|2C|H|2D|1|2E]]|A|$]]|$1|11|3|-4|5|6|7|2F|8|@]|9|@]|A|$]]]|12|$13|$5|14|15|16|A|$17|18|19|-4]]|1A|$5|1B|15|1C|A|$1D|1E]]|1F|$5|14|15|16|A|$17|1G|19|-4]]|1H|$5|1B|15|1C|A|$1D|1I]]]]

Here is a pie chart without using external libraries, using html5 canvas :
<a href="https://i.stack.imgur.com/qMjJj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qMjJj.png" alt="enter image description here" /></a>
<a href="http://jsfiddle.net/ya3ya6/yd3rzo42/" rel="nofollow noreferrer">See the code</a>
But it's better to use libraries for drawing charts. in <code>apex-charts</code> there is an option called <code>sparkline</code>, which helps you to remove the extra stuffs and draw a minimal and clean chart.
Here is a clean donut chart using <code>apex-charts</code> library. (Extra stuffs are removed with <code>sparkline</code> option):
<a href="https://i.stack.imgur.com/q33kW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/q33kW.png" alt="enter image description here" /></a>
<pre><code>var options = {
 series: [620, 40],
 labels: ['Finished', 'Unfinished'],
 chart: {
 type: 'donut',
 sparkline: {
 enabled: true,
 }
 },
 plotOptions: {
 pie: {
 donut: {
 labels: {
 show: true,
 total: {
 showAlways: false,
 show: true,
 label: 'Total'
 }
 }
 }
 }
 },
};
var chart = new ApexCharts(document.querySelector(&quot;#chart&quot;), options);
chart.render();

</code></pre>
<a href="https://codepen.io/ya3ya6/pen/vYGZBmj" rel="nofollow noreferrer">See it on codepen</a>

I'm attempting to create a simple pie chart like shown in the graphic below:

<img src="https://i.stack.imgur.com/dwMB0.png" alt="enter image description here">

The chart will show the results for a quiz where a user can choose either a, b or c. They're 10 questions and the user can only choose one option per question.

What I want to do is show the pie chart with each segment being a percentage of 100% by passing in the values for either a,b, or c.

I have the following so far:

<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var greenOne = "#95B524";
var greenTwo = "#AFCC4C";
var greenThree = "#C1DD54";

function CreatePieChart() {
 var chart = document.getElementById('piechart');
 var canvas = chart.getContext('2d');
 canvas.clearRect(0, 0, chart.width, chart.height);

 var total = 100;

 var a = 3;
 var b = 4;
 var c = 3;

 for (var i = 0; i &lt; 3; i++) {
 canvas.fillStyle = "#95B524";
 canvas.beginPath();
 canvas.strokeStyle = "#fff";
 canvas.lineWidth = 3;
 canvas.arc(100, 100, 100, 0, Math.PI * 2, true);
 canvas.closePath();
 canvas.stroke();
 canvas.fill();
 }
}
CreatePieChart();</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="piechart" width="200" height="200"&gt;&lt;/canvas&gt;</code></pre>
</div>
</div>


The colors are specific to the size of the segment, so green one is used for the largest and green three for the smallest.

Thanks

HTML5 Canvas pie chart

我正在尝试创建一个简单的饼图，如下图所示：​​该图表将显示测验的结果，其中用户可以选择a、b或c。共有10个问题，每个问题用户只能选择一个选项。我想要做的是通过传入a、b或c的值来显示饼图，其中每个部分都是100%的百分比。到目前为止，我有以下几点：​var greenOne = "#95B524";var green...

问HTML5画布饼图
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5画布饼图EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5画布饼图
EN