实现复杂圆图（d3.js？）的最佳方法是什么？
[英]What is the best way to implement the complex circular charts (d3.js?)
问题描述
I am trying to implement a chart something like this 
我正在尝试实现这样的图表
I wanted to know id d3.js library would allow me to plot such kind of graphs. 我想知道id d3.js库将允许我绘制这种图形。
Any help would be appreciated. 任何帮助，将不胜感激。
2 个解决方案
解决方案1
1 2014-04-10 21:59:00
There is no need for a library, Canvas can draw the graph, animate it, scale it, or anything you might need fairly easily. 不需要库， Canvas可以绘制图形，设置动画，缩放比例或任何您可能很需要的东西。 The Arc method is particularly relevant. 电弧法特别重要。
ctx.beginPath();
//Start the arc at 90 degrees, aka the bottom.
//End the arc at 360 - (360 degrees * 46% expressed as 0.46) + our starting 90 degrees.
//Pi/180 converts degrees to radians.
ctx.arc(64,64,32,284.4*(Math.PI/180),90*(Math.PI/180));
ctx.lineWidth=8;
ctx.strokeStyle="green"
ctx.stroke();
解决方案2
1 2018-01-09 22:04:31
If somebody's still looking for this, here's the entire thing. 如果有人仍在寻找这个，这就是全部。 Just use HTML 5 canvas tag and use it's 2D context to draw. 只需使用HTML 5 canvas标签并使用其2D上下文进行绘制即可。 Drawing part is in JS. 绘图部分在JS中。
var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(100, 75, 50, 1.5 * Math.PI, .5 * Math.PI, false); ctx.lineWidth=8; ctx.strokeStyle="green"; ctx.stroke(); ctx.beginPath(); ctx.arc(100, 75, 42, 1.5 * Math.PI, .7 * Math.PI, false); ctx.lineWidth=8; ctx.strokeStyle="blue"; ctx.stroke(); ctx.beginPath(); ctx.arc(100, 75, 34, 1.5 * Math.PI, .6 * Math.PI, false); ctx.lineWidth=8; ctx.strokeStyle="red"; ctx.stroke();
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.