Question

我正在尝试实现类似于此 enter image description here

的图表

我想知道id d3.js库可以让我绘制这样的图形。

任何帮助都将不胜感激。

Answer 1

不需要库，Canvas可以绘制图形，动画，缩放，或者您可能非常容易需要的任何内容。 Arc方法特别重要。

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();

Answer 2

如果有人还在寻找这个，那就是整个事情。只需使用HTML 5 canvas标签并使用它的2D上下文进行绘制。绘图部分在JS中。

＆＃13;

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();

＆＃13;

<!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>

＆＃13;

实现复杂圆形图表的最佳方法是什么（d3.js？）

2 个答案: