Question

我正在制作一张图表，我需要从html导出到pdf。我正在使用的pdf引擎无法执行JS，我需要找到一种从服务器端生成HTML SVG的方法。

这就是我目前所拥有的：

＆＃13;

<svg height="450px" width="100%" class="nvd3-svg" style="height: 450px; width: 100%;">
	<g class="nvd3 nv-wrap nv-pieChart" transform="translate(20,-25)">
		<g>
			<g class="nv-pieWrap nvd3-svg">
				<g class="nvd3 nv-wrap nv-pie nv-chart-6755" transform="translate(0,0)">
					<g>
						<g class="nv-pie" transform="translate(353,227.5)">
							<g class="nv-slice" fill="#003087" stroke="#003087">
								<path d="M1.1144285872240914e-14,-182A182,182 0 1,1 -177.4368800170919,40.49880998004924L-110.89805001068244,25.311756237530776A113.75,113.75 0 1,0 6.965178670150571e-15,-113.75Z">
								</path>
							</g>
							<g class="nv-slice hover" fill="#393939" stroke="#393939">
								<path d="M-178.555801655312,40.75419654232691A183.1476967930029,183.1476967930029 0 0,1 -3.364368609731414e-14,-183.1476967930029L-2.0895536010451713e-14,-113.75A113.75,113.75 0 0,0 -110.89805001068244,25.311756237530776Z">
								</path>
							</g>
						</g>
						<g class="nv-pieLabels" transform="translate(353,227.5)">
							<g class="nv-label" transform="translate(115.6133304699599,92.19855444986021)">
								<rect rx="3" ry="3" style="stroke: rgb(255, 255, 255); fill: rgb(255, 255, 255);">
								</rect>
								<text style="text-anchor: middle; fill: white;">71%</text>
							</g>
							<g class="nv-label" transform="translate(-115.61333046995992,-92.1985544498602)">
								<rect rx="3" ry="3" style="stroke: rgb(255, 255, 255); fill: rgb(255, 255, 255);">
								</rect>
								<text style="text-anchor: middle; fill: white;">29%</text>
							</g>
						</g>
					</g>
				</g>
			</g>
			<g class="nv-legendWrap nvd3-svg" transform="translate(0,25)">
				<g class="nvd3 nv-legend" transform="translate(10,205)">
					<g transform="translate(310,205)">
						<g class="nv-series" transform="translate(0,5)">
							<circle class="nv-legend-symbol" r="5" style="stroke-width: 2; fill: rgb(0, 48, 135); fill-opacity: 1; stroke: rgb(0, 48, 135);">
							</circle>
							<text text-anchor="start" class="nv-legend-text" dy=".32em" dx="8" fill="#000">Cold</text>
						</g>
						<g class="nv-series" transform="translate(65,5)">
							<circle class="nv-legend-symbol" r="5" style="stroke-width: 2; fill: rgb(57, 57, 57); fill-opacity: 1; stroke: rgb(57, 57, 57);">
							</circle>
							<text text-anchor="start" class="nv-legend-text" dy=".32em" dx="8" fill="#000">Hot</text>
						</g>
					</g>
				</g>
			</g>
		</g>
	</g>
</svg>

＆＃13;

从上面的代码中，我需要更改哪些值以使此图表相应地响应Cold和Hot的动态值。我没有取得任何进展，我已经研究和调整了很多。非常感谢您的协助。

Answer 1

要更改图表的两个部分，您需要更改两个<path>元素。更具体地说，这些路径的d属性。

d属性描述曲线的形状。如果我将较大的一个重新格式化为更整洁的东西，并减少小数位，你应该能够更好地了解正在发生的事情。

M -178.56, 40.75
A 183.14, 183.14 0 0,1 -3.36e-14,-183.14
L -2.08e-14, -113.75
A 113.75,113.75 0 0,0 -110.89, 25.31
Z

它开始（M =＆＃34;移动到＆＃34;）大约（-178,40）。然后将rdius 183的弧（＆＃34; A＆＃34;）绘制成（0，-183）。然后是从外半径到内半径的一条线（＆＃34; L＆＃34;）。然后最后另一个弧（＆＃34; A＆＃34;）回到起点。决赛＆＃34; Z＆＃34;关闭曲线以便填充。

因此要更改该图形部分的大小。你需要调整两个＆＃34; A＆＃34;命令和＆＃34; L＆＃34;命令。

您可以通过阅读the SVG specification了解有关如何执行此操作的详情。或者，您可以查看网络上提供的众多教程中的任何内容。

您的SVG图表看起来可能是由D3.js等SVG图表库生成的。您可能希望调查该选项。

仅使用SVG标记的圆环图

1 个答案: