如何仅使用笔触-dasharray而不是笔触-dashoffset绘制饼图 [英] How can I draw a pie chart only using stroke-dasharray, not stroke-dashoffset

问题描述

我试图仅使用笔触-dasharray和其他诸如旋转和平移之类的方法绘制饼图，由于wkhtmltopdf 0.12.5不支持笔触-dashoffset，因此我不允许使用它.我试图做类似下面的代码

I am trying to draw a pie chart only using stroke-dasharray and other things like rotate and translate, I am not allowed to use stroke-dashoffset since it is not supported by wkhtmltopdf 0.12.5. I have tried to do something similar to the code below

<svg height="20%" width="20%" viewBox="0 0 20 20" style="border:1px solid gray; ">
  <circle r="10" cx="10" cy="10" fill="white" />
  <circle r="5" cx="10" cy="10" fill="bisque"
          stroke="tomato"
          stroke-width="10"
          stroke-dasharray="10.99 31.4"
          transform="rotate(-90) translate(-20)"/>
</svg>

其中31.4是圆的圆周，而10.99是圆的35％.这将绘制一个表示饼图35％的切片.我如何在不使用笔划划线偏移的情况下绘制更多切片(例如，一个代表40％，另一个代表13％)，我无法弄清楚.非常感谢您的帮助.

Where 31.4 is the circumference of the circle and 10.99 is 35% of the circumference. This is drawing a slice representing 35% of the pie. How can I draw more slices (for example one respresenting 40% and another for 13%) after this one without using stroke-dashoffset, I could not figure this out. Thanks a lot for the help guys.

推荐答案

实际上不建议使用这种方式创建饼图.所谓那样"，是指制作笔划宽度与圆的半径相匹配的圆.确切地说，笔划宽度是圆半径的两倍.

Creating pie charts that way is not really recommended. By "that way", I am referring to making circles where the stroke width matches the radius of the circle. To be precise, the stroke width is double the circle radius.

某些浏览器(或浏览器版本)和渲染库在渲染这种形式的圆圈时存在错误.推荐的方法是为每个饼图段创建一个路径.

Some browsers (or browser versions) and rendering libraries have had bugs rendering circles of that form. The recommended way would be to create a path for each pie chart segment.

但是，假设您要继续使用此方法，那么这里就是您需要了解的内容.

However, assuming you want to continue with this method, then here is what you need to know.

• < circle> 元素上的描边图案从3点开始渲染，并沿圆圈顺时针方向进行.

• Stroke patterns on <circle> elements are rendered starting at 3 o'clock, and proceed clockwise around the circle.

这就是为什么在上面的示例中使用 rotate(-90)的原因.-90旋转使圆-90deg旋转，从而使笔划从顶部(12点钟)开始.

That's why you have the rotate(-90) in your example above. The -90 rotation is rotating the circle -90deg so that the stroke starts at the top (12 o'clock).

破折号模式中的两个数字是<破折号的长度>.<间隙长度> .然后图案会重复.

The two numbers in the dash pattern are <length of dash> <length of gap>. The pattern then repeats.

好的.让我们更新您的SVG，以添加您请求的额外细分.

Okay. Let's update your SVG to add the extra segments you requested.

首先，我建议进行一些更改:

Firstly, I would suggest a couple of changes:

1. 将 rotate(-90)移至父组，以便在计算新切片的旋转度时不必担心.
2. 如果使用带有旋转中心的 rotate()版本，您会发现容易得多: rotate(angle，centerX，centerY).
3. 我们需要将填充颜色( fill ="bisque" )添加到单独的圆圈中.否则，您添加的每个新细分的填充都会与之前的细分重叠.

1. Move the rotate(-90) to a parent group so that you don't have to worry about it when calculating the rotations for your new slices.
2. You'll find it a lot easier if you use the version of rotate() that takes a centre of rotaion: rotate(angle, centreX, centreY).
3. We need to add the fill colour (fill="bisque") to a separate circle. Otherwise the fill of each new segment you add will overlap the previous segments.

所以我们的新起点是这样:

So our new starting point is this:

<svg height="20%" width="20%" viewBox="0 0 20 20" style="border:1px solid gray; ">
  <circle r="5" cx="10" cy="10" fill="bisque" />
  <g transform="rotate(-90, 10,10)" fill="none" stroke-width="10">
    <circle r="5" cx="10" cy="10"
            stroke="tomato"
            stroke-dasharray="10.99 31.4"/>
  </g>
</svg>

添加40％的细分受众群

您所需的笔画长度将为 31.4的40％= 12.56 .

The stroke length you need will be 40% of 31.4 = 12.56.

要使其旋转以使其开始于第一段的结尾，您需要将其旋转等于(10.99/31.4)* 360deg = 126deg 的角度.

To rotate it so that it starts at the end of the first segment, you'll need to rotate it by an angle equal to (10.99 / 31.4) * 360deg = 126deg.

<svg height="20%" width="20%" viewBox="0 0 20 20" style="border:1px solid gray; ">
  <circle r="5" cx="10" cy="10" fill="bisque" />
  <g transform="rotate(-90, 10,10)" fill="none" stroke-width="10">
    <circle r="5" cx="10" cy="10"
            stroke="tomato"
            stroke-dasharray="10.99 31.4"/>
    <circle r="5" cx="10" cy="10"
            stroke="goldenrod"
            stroke-dasharray="12.56 31.4"
            transform="rotate(126, 10,10)"/>
  </g>
</svg>

添加13％的细分受众群

您需要的笔触长度将为 31.4的13％= 4.082 .

The stroke length you need will be 13% of 31.4 = 4.082.

要对其进行旋转以使其开始于上一个分段的末尾，您需要对前两个分段的长度求和，并将其转换为角度.

To rotate it so that it starts at the end of the previous segment, you'll need to sum the lengths of the first two segments, and convert that to an angle.

((10.99 + 12.56) / 31.4) * 360deg = 0.75 * 360 = 270deg`.

<svg height="20%" width="20%" viewBox="0 0 20 20" style="border:1px solid gray; ">
  <circle r="5" cx="10" cy="10" fill="bisque" />
  <g transform="rotate(-90, 10,10)" fill="none" stroke-width="10">
    <circle r="5" cx="10" cy="10"
            stroke="tomato"
            stroke-dasharray="10.99 31.4"/>
    <circle r="5" cx="10" cy="10"
            stroke="goldenrod"
            stroke-dasharray="12.56 31.4"
            transform="rotate(126, 10,10)"/>
    <circle r="5" cx="10" cy="10"
            stroke="cornflowerblue"
            stroke-dasharray="4.082 31.4"
            transform="rotate(270, 10,10)"/>
  </g>
</svg>

这篇关于如何仅使用笔触-dasharray而不是笔触-dashoffset绘制饼图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！