📄 chartheader.jsp
字号:
<%@ page contentType="image/svg-xml" %>
<svg width="625" height="392" onload="Initialize(evt)">
<title>chart.svg</title>
<desc>bar and pie chart</desc>
<style type="text/css"/>
<defs transform="matrix(1 0 0 1 -3 -3)">
<radialGradient id="aigrd11" cx="105.765" cy="160.95" r="3.5039" fx="105.765"
fy="160.95" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:rgb(36,117,141)"/>
<stop offset="0.4045" style="stop-color:rgb(153,255,255)"/>
<stop offset="1" style="stop-color:rgb(36,117,141)"/>
</radialGradient>
<radialGradient id="aigrd10" cx="94.3613" cy="148.967" r="3.5039" fx="94.3613"
fy="148.967" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:rgb(36,117,141)"/>
<stop offset="0.4045" style="stop-color:rgb(153,255,255)"/>
<stop offset="1" style="stop-color:rgb(36,117,141)"/>
</radialGradient>
<radialGradient id="aigrd9" cx="83.4536" cy="148.967" r="3.5039" fx="83.4536"
fy="148.967" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:rgb(36,117,141)"/>
<stop offset="0.4045" style="stop-color:rgb(153,255,255)"/>
<stop offset="1" style="stop-color:rgb(36,117,141)"/>
</radialGradient>
<radialGradient id="aigrd8" cx="71.0586" cy="148.967" r="3.5039" fx="71.0586"
fy="148.967" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:rgb(36,117,141)"/>
<stop offset="0.4045" style="stop-color:rgb(153,255,255)"/>
<stop offset="1" style="stop-color:rgb(36,117,141)"/>
</radialGradient>
<radialGradient id="aigrd7" cx="56.1841" cy="144.967" r="3.5039" fx="56.1841"
fy="144.967" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:rgb(36,117,141)"/>
<stop offset="0.4045" style="stop-color:rgb(153,255,255)"/>
<stop offset="1" style="stop-color:rgb(36,117,141)"/>
</radialGradient>
<radialGradient id="aigrd6" cx="42.3013" cy="158.967" r="3.5039" fx="42.3013"
fy="158.967" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:rgb(36,117,141)"/>
<stop offset="0.4045" style="stop-color:rgb(153,255,255)"/>
<stop offset="1" style="stop-color:rgb(36,117,141)"/>
</radialGradient>
<radialGradient id="aigrd5" cx="30.3467" cy="166.032" r="3.5039" fx="30.3467"
fy="166.032" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:rgb(36,117,141)"/>
<stop offset="0.4045" style="stop-color:rgb(153,255,255)"/>
<stop offset="1" style="stop-color:rgb(36,117,141)"/>
</radialGradient>
<linearGradient id="aigrd4" gradientUnits="userSpaceOnUse" x1="16.9731"
y1="258.775" x2="118.153" y2="258.775">
<stop offset="0" style="stop-color:rgb(36,117,141)"/>
<stop offset="0.4045" style="stop-color:rgb(153,255,255)"/>
<stop offset="1" style="stop-color:rgb(36,117,141)"/>
</linearGradient>
<linearGradient id="aigrd3" gradientUnits="userSpaceOnUse" x1="518.398"
y1="106.146" x2="623.166" y2="106.146">
<stop offset="0" style="stop-color:rgb(36,117,141)"/>
<stop offset="0.4045" style="stop-color:rgb(153,255,255)"/>
<stop offset="1" style="stop-color:rgb(36,117,141)"/>
</linearGradient>
<linearGradient id="aigrd2" gradientUnits="userSpaceOnUse" x1="518.398"
y1="149.896" x2="623.166" y2="149.896">
<stop offset="0" style="stop-color:rgb(36,117,141)"/>
<stop offset="0.4045" style="stop-color:rgb(153,255,255)"/>
<stop offset="1" style="stop-color:rgb(36,117,141)"/>
</linearGradient>
<linearGradient id="aigrd1" gradientUnits="userSpaceOnUse" x1="518.398"
y1="193.646" x2="623.166" y2="193.646">
<stop offset="0" style="stop-color:rgb(36,117,141)"/>
<stop offset="0.4045" style="stop-color:rgb(153,255,255)"/>
<stop offset="1" style="stop-color:rgb(36,117,141)"/>
</linearGradient>
<filter id="DropShadowFilter" filterUnits="objectBoundingBox" x="-10%" y="-10%"
width="120%" height="120%">
<feGaussianBlur in="SourceAlpha" stdDeviation="2" result="BlurAlpha"/>
<feOffset in="BlurAlpha" dx="4" dy="4" result="OffsetBlurAlpha"/>
<feMerge>
<feMergeNode in="OffsetBlurAlpha"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<g id="title" style="fill-rule:nonzero;clip-rule:nonzero;fill:rgb(153,102,0);stroke:rgb(0,0,0);stroke-miterlimit:4;
" transform="matrix(1 0 0 1 -3 -3)">
<path style="opacity:0.15;fill:rgb(153,153,204);stroke:rgb(153,153,102);stroke-width:0.25"
d="M549.7 46 L95.8 46 C87.8 46 81.3 51.9 81.3 59.3 L81.3 350.9 C81.3 357.9 87.8 363.7 95.8 363.7 L549.6 363.7 C557.6 363.7 564.1 358 564.1 350.9 L564.1 59.3 C564.1 52 557.6 46 549.6 46 z"/>
<text transform="matrix(1 0 0 1 14 41.7061)">
<tspan x="0" y="0" style="fill:rgb(0,0,0);stroke:none;font-family:'Myriad-Roman';font-size:24"><title>chart.svg</title></tspan>
</text>
</g>
<g id="buttons" style="fill-rule:nonzero;clip-rule:nonzero;fill:rgb(153,153,153);stroke:rgb(0,0,0);stroke-miterlimit:4;
font-family:'Myriad-Roman';font-size:14"
transform="matrix(1 0 0 1 -5.88018 -100.039)">
<g id="bar" onclick="ShowBar()">
<g>
<path style="fill:rgb(42,137,165);stroke:none"
d="M86.1 339.2 L19.3 349 L19.3 323.6 L86 313.8 L86 339.2 z"/>
<path style="fill:rgb(22,72,88);stroke:none"
d="M119.4 358.8 L86 339.1 L86 313.7 L119.4 333.4 z"/>
<path style="fill:rgb(27,88,106);stroke:none"
d="M19.3 349 L86 339.2 L119.4 358.9 L52.7 368.7 z"/>
</g>
<g>
<path style="fill:rgb(106,55,77);stroke:none"
d="M82.2 350.9 L82.2 321.6 L87.8 326.1 L87.8 355.4 z"/>
<path style="fill:rgb(128,67,94);stroke:none"
d="M87.8 326.2 L82.2 321.7 L93.3 319.4 L98.8 323.9 L87.7 326.2 z"/>
<path style="fill:rgb(199,104,145);stroke:none"
d="M87.8 355.5 L87.8 326.2 L98.9 323.9 L98.9 353.2 z"/>
</g>
<g>
<path style="fill:rgb(205,113,0);stroke:none"
d="M74.2 357.9 L74.2 345.4 L84.5 343.3 L84.5 355.8 z"/>
<path style="fill:rgb(109,60,0);stroke:none"
d="M69.1 353.7 L69.1 341.2 L74.3 345.4 L74.3 357.9 z"/>
<path style="fill:rgb(132,72,0);stroke:none"
d="M74.2 345.5 L69 341.3 L79.3 339.2 L84.5 343.4 z"/>
</g>
<g>
<path style="fill:rgb(113,162,20);stroke:none"
d="M59.2 361.1 L59.2 341.5 L69.5 339.4 L69.5 359 z"/>
<path style="fill:rgb(72,104,13);stroke:none"
d="M59.2 341.5 L54 337.3 L64.3 335.2 L69.5 339.4 z"/>
<path style="fill:rgb(60,86,11);stroke:none"
d="M54 356.9 L54 337.3 L59.2 341.5 L59.2 361.1 z"/>
</g>
<g>
<path style="fill:rgb(103,85,7);stroke:none"
d="M39.9 359.8 L39.9 334.8 L45 339 L45 364 L39.8 359.8 z"/>
<path style="fill:rgb(125,103,9);stroke:none"
d="M45 339 L39.8 334.8 L50.1 332.7 L55.3 336.9 z"/>
<path style="fill:rgb(194,160,14);stroke:none"
d="M45 364 L45 339 L55.3 336.9 L55.3 361.9 z"/>
</g>
<text id="barChart" transform="matrix(1 0 0 1 67.7261 383.5)">
<tspan x="0" y="0" style="fill:rgb(0,0,0);fill-opacity:0.5;stroke:none">Bar Chart</tspan>
</text>
<path id="showbarrect" style="opacity:0.15;fill:rgb(255,153,102);stroke:rgb(153,102,0)"
d="M130.8 371.7 C130.8 379.3 125.4 385.5 118.8 385.5 L20.8 385.5 C14.2 385.5 8.8 379.3 8.8 371.7 L8.8 324.4 C8.8 316.8 14.2 310.6 20.8 310.6 L118.8 310.6 C125.4 310.6 130.8 316.8 130.8 324.4 z"/>
</g>
<g id="pie" onclick="ShowPie()">
<path style="fill:url(#aigrd4);stroke:none"
d="M109.4 255.1 C103.5 258.7 96.6 260.7 89.8 262 C82.8 263.4 75.6 264 68.5 264.1 C61.2 264.2 53.9 263.6 46.8 262.3 C40 261 33.2 259.2 27.1 255.9 C22.5 253.4 17 249.3 17 243.5 C17 246.4 17 249.3 17 252.2 C17 254.1 17.2 255.9 18 257.6 C19.5 260.6 22.1 262.8 24.9 264.6 C30.7 268.3 37.6 270.4 44.4 271.8 C51.4 273.3 58.6 274 65.8 274.1 C73 274.2 80.2 273.7 87.3 272.5 C94.2 271.3 101.1 269.5 107.3 266.3 C112 263.9 118 259.7 118.2 253.8 C118.3 250.9 118.2 247.9 118.2 244.9 C118.2 244.4 118.2 244 118.2 243.5 C118.2 248.7 113.5 252.6 109.4 255.1"/>
<path style="fill:rgb(36,117,141);stroke:none"
d="M117.1 239.3 C122.7 250.5 105.1 261.4 77.7 263.7 C50.3 266 23.6 258.8 18 247.6 C12.4 236.4 30 225.5 57.4 223.2 C84.8 220.9 111.5 228.1 117.1 239.3 z"/>
<path style="fill:rgb(175,131,0);stroke:none"
d="M67 243.8 L24.8 232.4 C24.8 232.4 30.4 228.8 37.1 226.9 C45.4 224.6 51.9 223.8 51.9 223.8 L67.1 243.8 z"/>
<path style="fill:rgb(173,97,54);stroke:none"
d="M67 243.8 L51.8 223.8 C51.8 223.8 55.4 223.3 60.6 223 C65.7 222.7 69 222.8 69 222.8 z"/>
<path style="fill:rgb(140,159,7);stroke:none"
d="M66.9 244 L69 222.9 C69 222.9 70.2 222.8 72.3 223 C74.3 223.1 75.4 223.2 75.4 223.2 z"/>
<text id="pieHhart" transform="matrix(1 0 0 1 69 289.5)">
<tspan x="0" y="0" style="fill:rgb(0,0,0);fill-opacity:0.5;stroke:none">Pie Chart</tspan>
</text>
<path id="showpierect" style="opacity:0.15;fill:rgb(0,0,255);stroke:rgb(153,102,0)"
d="M130.8 279.9 C130.8 287.5 125.4 293.7 118.8 293.7 L20.8 293.7 C14.2 293.7 8.8 287.5 8.8 279.9 L8.8 232.6 C8.8 225 14.2 218.8 20.8 218.8 L118.8 218.8 C125.4 218.8 130.8 225 130.8 232.6 z"/>
</g>
</g>
<g id="hiddenChart" transform="matrix(1 0 0 1 77 12)">
<g>
<g id="barchart1" transform="matrix(1 0 0 1 190 270)"
style="visibility:hidden">
<path d="M0 0 L-5 0 L0 0 L0 -150 L-5 -150 L5 -150 L0 -150 L0 0 L250 0 L0 0"
style="fill:none;stroke:rgb(0,0,0);filter:url(#DropShadowFilter)"/>
<g id="bars" style="filter:url(#DropShadowFilter)">
</g>
<g id="labels" transform="matrix(1 0 0 1 12 12)">
</g>
</g>
<g id="piechart1" transform="matrix(1 0 0 0.5 300 230)"
style="filter:url(#DropShadowFilter)">
<g id="slices">
</g>
</g>
<g id="pieitemlabel">
<text id="labelitem" x="295" y="340"
style="font-size:13" text-anchor="end" font-weight="bold">
</text>
<text id="labelcolon" x="300" y="340"
style="font-size:13" text-anchor="middle">
</text>
<text id="labelamount" x="305" y="340"
style="font-size:13" text-anchor="begin">
</text>
</g>
</g>
<g>
<text x="320" y="70" style="font-size:20" font-weight="bold"
text-anchor="middle">
</text>
<text id="subtitle" x="300" y="130" style="font-size:16" font-weight="bold"
text-anchor="middle">
</text>
</g>
<g id="barsidetext" style="visibility:hidden">
<text id="axis" x="-190" y="125" style="font-size:13"
transform="matrix(-2.43539e-016 -1 1 -2.43539e-016 0 0)"
font-weight="bold" text-anchor="middle">
</text>
<text id="max" x="175" y="105" style="font-size:13" font-weight="bold"
text-anchor="end">
</text>
<text id="min" x="175" y="285" style="font-size:13" font-weight="bold"
text-anchor="end">
</text>
</g>
</g>
<script type="text/ecmascript"><![CDATA[
ColorArray = new Array("#FF9966",
"#C2A00E",
"#71A214",
"#3399CC",
"#CC99FF",
"#FF9999",
"#00CC99",
"#C2CC0E",
"#71CC14",
"#CC68CC",
"#66FFCC")
ActiveSegment = "Pie"
CurrentColor = 0;
SVGDocument = null
BarChartHeight = 150
BarChartWidth = 250
PieChartSize = 140
MoveDistance = 40
Values = new Array()
Names = new Array()
PieElements = new Array()
BarElements = new Array()
BarTexts = new Array()
DeleteList = new Array()
PieTotalSize = 0;
BarTotalSize = 0;
MaxSize = 0;
AngleFactor = Math.pow(2, .5)
Removed = true
function ClearChart()
{
for (var I = 0; I < PieElements.length; I++)
{
ParentGroup1.removeChild(PieElements[I])
ParentGroup2.removeChild(BarElements[I])
SVGDocument.getElementById("labels").removeChild(Names[I])
}
PieElements = new Array()
BarElements = new Array()
BarTexts = new Array()
Values = new Array()
Names = new Array()
PieTotalSize = 0;
BarTotalSize = 0;
MaxSize = 0;
if (!(Removed))
{
Grandparent1.removeChild(ParentGroup1)
Grandparent2.removeChild(ParentGroup2)
}
Removed = true
}
function Initialize(LoadEvent)
{
SVGDocument = LoadEvent.getTarget().getOwnerDocument();
ParentGroup1 = SVGDocument.getElementById("slices");
Grandparent1 = SVGDocument.getElementById("piechart1");
ParentGroup2 = SVGDocument.getElementById("bars");
Grandparent2 = SVGDocument.getElementById("barchart1");
Removed = true;
Populate();
}
function AddChartValue(Value, Name, Repress)
{
Value = Value * 1
if ((Value <= 0) || (isNaN(Value)))
{
alert("Negative, textual or null values are not allowed")
return;
}
Color = ColorArray[CurrentColor]
CurrentColor++
if (CurrentColor >= ColorArray.length) CurrentColor = 0
if (!(Removed))
{
Grandparent1.removeChild(ParentGroup1)
Grandparent2.removeChild(ParentGroup2)
}
DeleteList[DeleteList.length] = false
Values[Values.length] = Value * 1
Names[Names.length] = SVGDocument.createElement("text")
PieElements[PieElements.length] = SVGDocument.createElement("path")
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -