<?xml version="1.0" encoding="UTF-8"?>

−

<svg version="1.1" preserveAspectRatio="xMinYMin meet" class="svg-chart" viewBox="0 0 820 500" xmlns:ds="http://www.bootstrap-data.org">

<script type="application/javascript">const doc = this.document; doc.addEventListener("DOMContentLoaded", (ev) => { const svg = ev.currentTarget; const growArr = svg.querySelectorAll("g.pie[data-transform]"); growArr.forEach(async (item) => { const svg = item.closest('svg'); await item.setAttribute('data-stroke-width', await item.style.strokeWidth); item.addEventListener("mouseenter", async (e) => { e.stopPropagation(); e.preventDefault(); const obj = e.currentTarget; const transform = obj.getAttribute('data-transform'); if( obj.hasAttribute('data-transform') ) { obj.style.transition = 'transform 500ms ease-in-out'; obj.style.transform = transform; } }, false); item.addEventListener("mouseleave", (e) => { e.stopPropagation(); e.preventDefault(); const obj = e.currentTarget; obj.style.transform = 'translate(0,0)'; obj.style.strokeWidth = obj.getAttribute('data-stroke-width'); }, false); } ); const edgeArr = svg.querySelectorAll("path.edge"); edgeArr.forEach(async (item) => { const g = item.closest('g'); g.addEventListener("mouseenter", async (e) => { e.stopPropagation(); e.preventDefault(); item.style.display = '' }, false); g.addEventListener("mouseleave", (e) => { e.stopPropagation(); e.preventDefault(); item.style.display = 'none'; }, false); } ); const toolArr = svg.querySelectorAll("foreignObject"); toolArr.forEach(async (foreign) => { const svg = foreign.closest('svg'); const g = foreign.closest('g'); var pt = svg.createSVGPoint(); g.addEventListener("mouseenter", async (e) => { e.stopPropagation(); e.preventDefault(); svg.appendChild(foreign); }, false); g.addEventListener("mousemove", async (e) => { e.stopPropagation(); e.preventDefault(); var loc = cursorPoint(e); const X = loc.x + 10; const Y = loc.y - 1; foreign.setAttribute('x',parseInt(X)); foreign.setAttribute('y',parseInt(Y)); foreign.style.display = ''; function cursorPoint(e) { pt.x = e.clientX; pt.y = e.clientY; return pt.matrixTransform(svg.getScreenCTM().inverse()); } }, false); g.addEventListener("mouseleave", (e) => { e.stopPropagation(); e.preventDefault(); foreign.style.display = 'none'; }, false); }); });</script>

<rect class="chart-frame" x="0" y="0" width="820" height="500" fill="#ffffff" stroke="#000000" stroke-width="0" stroke-dasharray="5,5"/>

<circle cx="410" cy="250" r="220" stroke="#808080" stroke-width="1" stroke-dasharray="" fill="#d3d3d3"/>

<circle cx="410" cy="250" r="200" stroke="#ffffff" stroke-width="0" stroke-dasharray="" fill="#ffffff"/>

<path position="1" stroke="" stroke-width="0" fill="#008000" d="M410,250 L295.79,409.29 A196,196 0 0,1 233.18,334.57 z"/>

<line class="marker" stroke="#000000" stroke-width="2" x1="312.691" y1="385.72" x2="295.793" y2="409.288"/>

<line class="submarker" stroke="#000000" stroke-width="1" x1="287.608" y1="381.986" x2="276.729" y2="393.718"/>

<line class="submarker" stroke="#000000" stroke-width="1" x1="272.031" y1="365.605" x2="259.767" y2="375.882"/>

<line class="submarker" stroke="#000000" stroke-width="1" x1="258.63" y1="347.402" x2="245.175" y2="356.06"/>

<path position="2" stroke="" stroke-width="0" fill="#008000" d="M410,250 L233.18,334.57 A196,196 0 0,1 214.31,238.92 z"/>

<line class="marker" stroke="#000000" stroke-width="2" x1="259.344" y1="322.053" x2="233.182" y2="334.565"/>

<line class="submarker" stroke="#000000" stroke-width="1" x1="239.163" y1="306.698" x2="223.977" y2="311.737"/>

<line class="submarker" stroke="#000000" stroke-width="1" x1="233.404" y1="284.839" x2="217.706" y2="287.936"/>

<line class="submarker" stroke="#000000" stroke-width="1" x1="230.43" y1="262.431" x2="214.468" y2="263.536"/>

<path position="3" stroke="" stroke-width="0" fill="#008000" d="M410,250 L214.31,238.92 A196,196 0 0,1 243.86,146.02 z"/>

<line class="marker" stroke="#000000" stroke-width="2" x1="243.267" y1="240.561" x2="214.313" y2="238.922"/>

<line class="submarker" stroke="#000000" stroke-width="1" x1="232.98" y1="217.383" x2="217.245" y2="214.484"/>

<line class="submarker" stroke="#000000" stroke-width="1" x1="238.464" y1="195.454" x2="223.216" y2="190.605"/>

<line class="submarker" stroke="#000000" stroke-width="1" x1="246.653" y1="174.385" x2="232.133" y2="167.663"/>

<path position="4" stroke="" stroke-width="0" fill="#008000" d="M410,250 L243.86,146.02 A196,196 0 0,1 314.5,78.84 z"/>

<line class="marker" stroke="#000000" stroke-width="2" x1="268.438" y1="161.405" x2="243.855" y2="146.02"/>

<line class="submarker" stroke="#000000" stroke-width="1" x1="270.589" y1="136.137" x2="258.197" y2="126.016"/>

<line class="submarker" stroke="#000000" stroke-width="1" x1="285.96" y1="119.562" x2="274.934" y2="107.968"/>

<line class="submarker" stroke="#000000" stroke-width="1" x1="303.286" y1="105.045" x2="293.8" y2="92.16"/>

<path position="5" stroke="" stroke-width="0" fill="#008000" d="M410,250 L314.5,78.84 A196,196 0 0,1 408.77,54 z"/>

<line class="marker" stroke="#000000" stroke-width="2" x1="328.629" y1="104.165" x2="314.499" y2="78.841"/>

<line class="submarker" stroke="#000000" stroke-width="1" x1="342.687" y1="83.06" x2="336.704" y2="68.221"/>

<line class="submarker" stroke="#000000" stroke-width="1" x1="364.141" y1="75.94" x2="360.065" y2="60.468"/>

<line class="submarker" stroke="#000000" stroke-width="1" x1="386.318" y1="71.565" x2="384.213" y2="55.704"/>

<path position="6" stroke="" stroke-width="0" fill="#ffa500" d="M410,250 L408.77,54 A196,196 0 0,1 503.34,77.65 z"/>

<line class="marker" stroke="#000000" stroke-width="2" x1="408.951" y1="83.003" x2="408.769" y2="54.004"/>

<line class="submarker" stroke="#000000" stroke-width="1" x1="431.437" y1="71.281" x2="433.343" y2="55.395"/>

<line class="submarker" stroke="#000000" stroke-width="1" x1="453.668" y1="75.377" x2="457.549" y2="59.855"/>

<line class="submarker" stroke="#000000" stroke-width="1" x1="475.21" y1="82.227" x2="481.006" y2="67.314"/>

<path position="7" stroke="" stroke-width="0" fill="#ffa500" d="M410,250 L503.34,77.65 A196,196 0 0,1 574.83,143.94 z"/>

<line class="marker" stroke="#000000" stroke-width="2" x1="489.532" y1="103.154" x2="503.343" y2="77.654"/>

<line class="submarker" stroke="#000000" stroke-width="1" x1="514.884" y1="103.715" x2="524.207" y2="90.712"/>

<line class="submarker" stroke="#000000" stroke-width="1" x1="532.392" y1="118.014" x2="543.271" y2="106.282"/>

<line class="submarker" stroke="#000000" stroke-width="1" x1="547.969" y1="134.395" x2="560.233" y2="124.118"/>

<path position="8" stroke="" stroke-width="0" fill="#f5f5f5" d="M410,250 L574.83,143.94 A196,196 0 0,1 605.53,236.46 z"/>

<line class="marker" stroke="#000000" stroke-width="2" x1="550.438" y1="159.633" x2="574.825" y2="143.94"/>

<line class="submarker" stroke="#000000" stroke-width="1" x1="572.384" y1="172.338" x2="586.818" y2="165.435"/>

<line class="submarker" stroke="#000000" stroke-width="1" x1="580.837" y1="193.302" x2="596.023" y2="188.263"/>

<line class="submarker" stroke="#000000" stroke-width="1" x1="586.596" y1="215.161" x2="602.294" y2="212.064"/>

<path position="9" stroke="" stroke-width="0" fill="#ff0000" d="M410,250 L605.53,236.46 A196,196 0 0,1 587.87,332.34 z"/>

<line class="marker" stroke="#000000" stroke-width="2" x1="576.601" y1="238.467" x2="605.532" y2="236.464"/>

<line class="submarker" stroke="#000000" stroke-width="1" x1="589.712" y1="260.173" x2="605.687" y2="261.078"/>

<line class="submarker" stroke="#000000" stroke-width="1" x1="587.02" y1="282.617" x2="602.755" y2="285.516"/>

<line class="submarker" stroke="#000000" stroke-width="1" x1="581.536" y1="304.546" x2="596.784" y2="309.395"/>

<path position="10" stroke="" stroke-width="0" fill="#ff0000" d="M410,250 L587.87,332.34 A196,196 0 0,1 526.2,407.84 z"/>

<line class="marker" stroke="#000000" stroke-width="2" x1="561.55" y1="320.154" x2="587.867" y2="332.337"/>

<line class="submarker" stroke="#000000" stroke-width="1" x1="562.582" y1="345.492" x2="576.145" y2="353.98"/>

<line class="submarker" stroke="#000000" stroke-width="1" x1="549.411" y1="363.863" x2="561.803" y2="373.984"/>

<line class="submarker" stroke="#000000" stroke-width="1" x1="534.04" y1="380.438" x2="545.066" y2="392.032"/>

<line class="marker" stroke="#000000" stroke-width="2" x1="509.007" y1="384.486" x2="526.2" y2="407.84"/>

<circle cx="410" cy="250" r="160" stroke="#ffffff" stroke-width="0" stroke-dasharray="" fill="#ffffff"/>

+

<defs>

+

<marker id="z555_arrowhead" markerWidth="10" markerHeight="7" refX="0" refY="3.5" orient="auto" fill="#000000">

<polygon points="0 0, 8 3.5, 0 7"/>

</marker>

[1 lines]

</defs>

[2 lines]

<line x1="410" y1="250" stroke="#000000" stroke-width="4" stroke-dasharray="" marker-end="url(#z555_arrowhead)" x2="284.617" y2="132.258"/>

<circle cx="410" cy="250" r="10" stroke="#808080" stroke-width="0" fill="#d3d3d3"/>

<text fill="#000000" font-family="Arial" font-size="50" alignment-baseline="middle" text-anchor="middle" x="410" y="410">34</text>

<text fill="#000000" font-family="Arial" font-size="14" x="322.6" y="371.9" text-anchor="start" alignment-baseline="start">0</text>

<text fill="#000000" font-family="Arial" font-size="14" x="274.68" y="314.72" text-anchor="start" alignment-baseline="start">10</text>

<text fill="#000000" font-family="Arial" font-size="14" x="260.24" y="241.52" text-anchor="start" alignment-baseline="middle">20</text>

<text fill="#000000" font-family="Arial" font-size="14" x="282.85" y="170.42" text-anchor="start" alignment-baseline="middle">30</text>

<text fill="#000000" font-family="Arial" font-size="14" x="336.91" y="119.01" text-anchor="middle" alignment-baseline="text-before-edge">40</text>

<text fill="#000000" font-family="Arial" font-size="14" x="409.06" y="100" text-anchor="middle" alignment-baseline="text-before-edge">50</text>

<text fill="#000000" font-family="Arial" font-size="14" x="481.44" y="118.1" text-anchor="middle" alignment-baseline="text-before-edge">60</text>

<text fill="#000000" font-family="Arial" font-size="14" x="536.14" y="168.83" text-anchor="end" alignment-baseline="middle">70</text>

<text fill="#000000" font-family="Arial" font-size="14" x="559.64" y="239.64" text-anchor="end" alignment-baseline="middle">80</text>

<text fill="#000000" font-family="Arial" font-size="14" x="546.12" y="313.01" text-anchor="end" alignment-baseline="text-before-edge">90</text>

<text fill="#000000" font-family="Arial" font-size="14" x="498.93" y="370.8" text-anchor="end" alignment-baseline="text-before-edge">100</text>

<style type="text/css" media="all">.svg-chart * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .svg-chart .bar { fill-opacity:1; } .svg-chart .bar:hover { fill-opacity:0.8; } .svg-chart .pie { fill-opacity:1; } /* .svg-chart .pie:hover { stroke: grey; stroke-width: 3px; } */ .pie:hover { fill-opacity:0.8; } .subpie:hover { fill-opacity:0.8; } foreignObject>div { float:left; background-color:rgb(33,37,41);color:white;font-family:Arial;font-size:14px; padding:5px; border:1px solid white; border-radius:3px; }</style>

</svg>

[74 lines]