SVGタグのみを使用したドーナツチャート

Question

私はhtmlからpdfにエクスポートする必要があるグラフを作成しています。私が使用しているpdfエンジンは、JSをそのように実行することができません。サーバー側からHTML SVGを生成する方法を見つける必要があります。

これは私が現在持っているものである：上記のコードから

<svg height="450px" width="100%" class="nvd3-svg" style="height: 450px; width: 100%;"> 
 
\t <g class="nvd3 nv-wrap nv-pieChart" transform="translate(20,-25)"> 
 
\t \t <g> 
 
\t \t \t <g class="nv-pieWrap nvd3-svg"> 
 
\t \t \t \t <g class="nvd3 nv-wrap nv-pie nv-chart-6755" transform="translate(0,0)"> 
 
\t \t \t \t \t <g> 
 
\t \t \t \t \t \t <g class="nv-pie" transform="translate(353,227.5)"> 
 
\t \t \t \t \t \t \t <g class="nv-slice" fill="#003087" stroke="#003087"> 
 
\t \t \t \t \t \t \t \t <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"> 
 
\t \t \t \t \t \t \t \t </path> 
 
\t \t \t \t \t \t \t </g> 
 
\t \t \t \t \t \t \t <g class="nv-slice hover" fill="#393939" stroke="#393939"> 
 
\t \t \t \t \t \t \t \t <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"> 
 
\t \t \t \t \t \t \t \t </path> 
 
\t \t \t \t \t \t \t </g> 
 
\t \t \t \t \t \t </g> 
 
\t \t \t \t \t \t <g class="nv-pieLabels" transform="translate(353,227.5)"> 
 
\t \t \t \t \t \t \t <g class="nv-label" transform="translate(115.6133304699599,92.19855444986021)"> 
 
\t \t \t \t \t \t \t \t <rect rx="3" ry="3" style="stroke: rgb(255, 255, 255); fill: rgb(255, 255, 255);"> 
 
\t \t \t \t \t \t \t \t </rect> 
 
\t \t \t \t \t \t \t \t <text style="text-anchor: middle; fill: white;">71%</text> 
 
\t \t \t \t \t \t \t </g> 
 
\t \t \t \t \t \t \t <g class="nv-label" transform="translate(-115.61333046995992,-92.1985544498602)"> 
 
\t \t \t \t \t \t \t \t <rect rx="3" ry="3" style="stroke: rgb(255, 255, 255); fill: rgb(255, 255, 255);"> 
 
\t \t \t \t \t \t \t \t </rect> 
 
\t \t \t \t \t \t \t \t <text style="text-anchor: middle; fill: white;">29%</text> 
 
\t \t \t \t \t \t \t </g> 
 
\t \t \t \t \t \t </g> 
 
\t \t \t \t \t </g> 
 
\t \t \t \t </g> 
 
\t \t \t </g> 
 
\t \t \t <g class="nv-legendWrap nvd3-svg" transform="translate(0,25)"> 
 
\t \t \t \t <g class="nvd3 nv-legend" transform="translate(10,205)"> 
 
\t \t \t \t \t <g transform="translate(310,205)"> 
 
\t \t \t \t \t \t <g class="nv-series" transform="translate(0,5)"> 
 
\t \t \t \t \t \t \t <circle class="nv-legend-symbol" r="5" style="stroke-width: 2; fill: rgb(0, 48, 135); fill-opacity: 1; stroke: rgb(0, 48, 135);"> 
 
\t \t \t \t \t \t \t </circle> 
 
\t \t \t \t \t \t \t <text text-anchor="start" class="nv-legend-text" dy=".32em" dx="8" fill="#000">Cold</text> 
 
\t \t \t \t \t \t </g> 
 
\t \t \t \t \t \t <g class="nv-series" transform="translate(65,5)"> 
 
\t \t \t \t \t \t \t <circle class="nv-legend-symbol" r="5" style="stroke-width: 2; fill: rgb(57, 57, 57); fill-opacity: 1; stroke: rgb(57, 57, 57);"> 
 
\t \t \t \t \t \t \t </circle> 
 
\t \t \t \t \t \t \t <text text-anchor="start" class="nv-legend-text" dy=".32em" dx="8" fill="#000">Hot</text> 
 
\t \t \t \t \t \t </g> 
 
\t \t \t \t \t </g> 
 
\t \t \t \t </g> 
 
\t \t \t </g> 
 
\t \t </g> 
 
\t </g> 
 
</svg>

は、私がこのチャートは、それに応じてコールドとホットの動的な値に対応するために変更するためにどのような値が必要なのか。私は頭を下げることなく、多くを研究し、それを微調整しました。あなたの援助は高く評価されます。

Answer 1

グラフの2つの部分を変更するには、2つの<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 

約（-178,40）で開始しています（M =「移動先」）。次に、rdius 183の円弧（ "A"）を（0、-183）に描画します。次に、外半径から内半径までの線（「L」）。最後に別の円弧（ "A"）が最初に戻ります。最後の "Z"はカーブを閉じて塗りつぶすことができます。

そのグラフ部分のサイズを変更します。 2つの "A"コマンドと "L"コマンドを調整する必要があります。

詳細については、the SVG specificationを参照してください。または、Web上で利用可能な多数のチュートリアルをチェックアウトすることができます。

あなたのSVGグラフは、おそらくD3.jsのようなSVGグラフ作成ライブラリによって生成されたようです。代わりにそのオプションを調べることができます。