如何从VML形状创建饼图？
我意识到，对于IE9来说，VML是不可取的，但我需要与旧版本兼容。我一直在研究高图集，以及他们是如何使基于SVG的图表与IE 6.0+一起工作的，答案是VML。
由于我能够在高级图表的帮助下在IE8中呈现一些示例，我还能够提取一些源代码示例以供使用。这个特定的图表是我试图理解和再现的一个。我不关心动画，工具提示文本或突出显示。基本上，我想了解如何绘制包含曲线的多边形，在这种情况下，作为半甜甜圈形状饼图的一部分。
下面的代码表示一个示例，该示例在框架形状内有三片饼形图。我一直在玩弄数字，但我不知道以下值究竟代表什么：
path = "
wr1120,933,4670,4483,0,2600,1170,2248
at2058,1870,3733,3545,2081,2510,500,2510 x e"很明显，它们代表了某种坐标、角度或距离，但在玩弄它们并搜索文档之后，我无法理解它们。
但是，我发现了(名为wr1-8和AT1-8的值)：
-wr似乎代表外圆，而at则代表内部切出(甜甜圈上的洞)。
- wr1-2和at1-2的值似乎代表了总圆的某种掩码。
- wr3-4和3-4的值似乎代表了某种拱的旋转，或者其他与拱有关的东西。在所有切片中，所有数字1-4是相等的。
- at和wr上的值5-6和7-8似乎表示连续的坐标，下一个切片从前一个停止的位置开始。然而，当我改变数字时，我找不到一个模式。我找不到系统。
那么这些值到底代表什么呢？或者更好的是，我在哪里可以找到解释这一点的文档？
下面是三个半甜甜圈饼图示例的完整代码：
<!doctype html public '-//W3C//DTD html 4.0 Transitional//EN'><%@ Language=VBScript%>
<html xmlns:v='urn:schemas-microsoft-com:vml'>
<STYLE>v\:* {behavior:url(#default#VML);}}</STYLE>
<shape style="POSITION: absolute; MARGIN-TOP: 0px; WIDTH: 1px;
DISPLAY: inline-block; HEIGHT: 1px; VISIBILITY: visible;
MARGIN-LEFT: 0px; TOP: 0px; BEHAVIOR: url(#default#VML);
LEFT: 0px" xmlns="urn:schemas-microsoft-com:vml" stroke-linejoin="round"
coordsize = "10,10" filled = "t" fillcolor = "#00FF00" stroked = "t"
strokecolor = "white" strokeweight = ".75pt"
path = " wr1120,933,4670,4483,0,2600,1170,2248
at2058,1870,3733,3545,2081,2510,500,2510 x e"><fill style="DISPLAY:
inline-block; BEHAVIOR: url(#default#VML)"
xmlns="urn:schemas-microsoft-com:vml" type = "solid" opacity = "1">
</fill></shape>
<shape style="POSITION: absolute; MARGIN-TOP: 0px; WIDTH: 1px;
DISPLAY: inline-block; HEIGHT: 1px; VISIBILITY: visible;
MARGIN-LEFT: 0px; TOP: 0px; BEHAVIOR: url(#default#VML);
LEFT: 0px" xmlns="urn:schemas-microsoft-com:vml" stroke-linejoin="round"
coordsize = "10,10" filled = "t" fillcolor = "#dddf00" stroked = "t"
strokecolor = "white" strokeweight = ".75pt" path = "
wr1120,933,4670,4483,1170,2248,2509,975
at2058,1870,3733,3545,2713,1890,2081,2510 x e">
<fill style="DISPLAY: inline-block; BEHAVIOR: url(#default#VML)"
xmlns="urn:schemas-microsoft-com:vml" type = "solid" opacity = "0.5">
</fill></shape>
<shape style="POSITION: absolute; MARGIN-TOP: 0px; WIDTH: 1px;
DISPLAY: inline-block; HEIGHT: 1px; VISIBILITY: visible;
MARGIN-LEFT: 0px; TOP: 0px; BEHAVIOR: url(#default#VML);
LEFT: 0px" xmlns="urn:schemas-microsoft-com:vml" stroke-linejoin="round"
coordsize = "10,10" filled = "t" fillcolor = "#ed561b" stroked = "t"
strokecolor = "white" strokeweight = ".75pt"
path = " wr1120,933,4670,4483,2509,975,2579,961
at2058,1870,3733,3545,2746,1883,2713,1890 x e">
</shape>回答 2
Stack Overflow用户
发布于 2014-05-28 10:53:26
- wr的意思是“顺时针拱”
- 意思是“拱门到”
在这两种情况下，这8个数字表示4 (x，y)-paired坐标。前两对表示启示录的包围框的左上角和右下角坐标。简单地说，它是在画布上的坐标，在那里你按鼠标，在那里你释放鼠标，同时画一个圆圈形状在MS油漆。
最后两对表示坐标，从圆心到给定的坐标给出矢量。所产生的角度将是给定切片的起始角和结束角。
夹角只决定边界圆与矢量之间的切点。换句话说，角度只给出一个点，而不是边。内圆和外圆都需要匹配的矢量角度，这样才能给出一个很好的表示，在这里，分隔甜甜圈片两侧的线都会在甜甜圈孔的中心交叉。
有关路径的所有可能命令的更多信息，请参见：
Toc416858391
Stack Overflow用户
发布于 2014-06-15 03:29:04
我建议先在SVG中创建，然后转换为VML，如果可以的话。我最近想出了怎么做。
本质上，它涉及到使用这个样式表：http://www.cs.sjsu.edu/faculty/pollett/masters/Semesters/Fall03/JulieNabong/translator.xsl
您还需要Notepad++及其XML插件。
1 - Open up the SVG file in Notepad++
2 - Go to Plugins --> XML Tools --> XSL Transformations
3 - Select the translator.xsl stylesheet
4 - Click on "Transform"这是论文的演示页面：http://www.cs.sjsu.edu/faculty/pollett/masters/Semesters/Fall03/JulieNabong/index.shtml?display.html
https://stackoverflow.com/questions/23907656
复制相似问题
腾讯云开发者
