javascript - Material 设计精简饼图动态

Question

您好，我正在使用 Material Design Lite Pie Chart .

代码如下:

<svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" class="demo-chart mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
   <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#piechart" mask="url(#piemask)"></use>
   <text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">
      82
      <tspan font-size="0.2" dy="-0.07">%</tspan>
   </text>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="position: fixed; left: -1000px; height: -1000px;">
   <defs>
      <mask id="piemask" maskContentUnits="objectBoundingBox">
         <circle cx="0.5" cy="0.5" r="0.49" fill="white"></circle>
         <circle cx="0.5" cy="0.5" r="0.40" fill="black"></circle>
      </mask>
      <g id="piechart">
         <circle cx="0.5" cy="0.5" r="0.5"></circle>
         <path d="M 0.5 0.5 0.5 0 A 0.5 0.5 0 0 1 0.95 0.28 z" stroke="none" fill="rgba(255, 255, 255, 0.75)"></path>
      </g>
   </defs>
</svg>

我怎样才能使这个动态我的意思是如果我添加 100 个标签它应该填充 100% 的圆..

Answer 1

您必须自己编写代码。我使用 SVG 路径 ( https://www.w3schools.com/graphics/svg_path.asp ) 并用正弦和余弦计算点。这并不容易，但没有比这更容易的库或工具。

我生成参数“d”的代码:

if (percent > 50 && percent <= 99) {
    if (bool_main_circle) {
        return "M100,50  A50,50 0 1,0 " + x + "," + y;
    } else {
        return "M100,50  A50,50 0 0,1 " + x + "," + y;
    }
} else if (percent <= 50 && percent >= 1) {
    if (bool_main_circle) {
        return "M100,50  A50,50 0 0,0 " + x + "," + y;
    } else {
        return "M100,50  A50,50 0 1,1 " + x + "," + y;
    }
} else if (percent == 100) {
    if (bool_main_circle) {
        return "M50,100a50,50 0 1,0 100,0a50,50 0 1,0 -100,0";
    } else {
        return "";
    }
} else if (percent === 0) {
    if (bool_main_circle) {
        return "";
    } else {
        return "M50,100a50,50 0 1,0 100,0a50,50 0 1,0 -100,0";
    }
} else {
    console.log("Only values up to 100 percent are possible!");
}

正如我所说，您需要使用正弦和余弦计算 x 和 y 值。 ( https://de.serlo.org/mathe/geometrie/sinus-kosinus-tangens/sinus-kosinus-tangens-einheitskreis/trigonometrie-einheitskreis ) 对不起，这个德语页面，但是当你点击“Veranschaulichung an einem Applet”时，它有一个非常好的小程序，它很好地展示了如何用正弦计算点。然后你只需要计算你的百分比值的度值(度数=百分比*3.6)。