113 lines
3.9 KiB
HTML
113 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<style>
|
|
.bar{
|
|
fill: grey;
|
|
stroke: black;
|
|
stroke-width: .05%;
|
|
}
|
|
.line{
|
|
stroke-width: .05%;
|
|
fill: none;
|
|
stroke: blue;
|
|
}
|
|
.filledLine{
|
|
fill: green;
|
|
stroke: green;
|
|
stroke-width: .05%;
|
|
}
|
|
.scatterPlot{
|
|
fill: black;
|
|
}
|
|
|
|
</style>
|
|
<meta charset="UTF-8">
|
|
<title>Charts</title>
|
|
</head>
|
|
|
|
|
|
<body>
|
|
<svg>
|
|
<g class="bar" transform="translate(20,150) scale(6,-6)">
|
|
<rect height="10.0" width="1"></rect>
|
|
<rect height="8.0" width="1" x="1"></rect>
|
|
<rect height="13.0" width="1" x="2"></rect>
|
|
<rect height="9.0" width="1" x="3"></rect>
|
|
<rect height="11.0" width="1" x="4"></rect>
|
|
<rect height="14.0" width="1" x="5"></rect>
|
|
<rect height="6.0" width="1" x="6"></rect>
|
|
<rect height="4.0" width="1" x="7"></rect>
|
|
<rect height="12.0" width="1" x="8"></rect>
|
|
<rect height="7.0" width="1" x="9"></rect>
|
|
<rect height="5.0" width="1" x="10"></rect>
|
|
</g>
|
|
</svg>
|
|
|
|
<svg>
|
|
<g class="bar" transform="translate(20,150) scale(6,-6)">
|
|
<rect height="7.46" width="1"></rect>
|
|
<rect height="6.7" width="1" x="1"></rect>
|
|
<rect height="12.74" width="1" x="2"></rect>
|
|
<rect height="7.11" width="1" x="3"></rect>
|
|
<rect height="7.81" width="1" x="4"></rect>
|
|
<rect height="8.84" width="1" x="5"></rect>
|
|
<rect height="6.08" width="1" x="6"></rect>
|
|
<rect height="5.39" width="1" x="7"></rect>
|
|
<rect height="8.15" width="1" x="8"></rect>
|
|
<rect height="6.42" width="1" x="9"></rect>
|
|
<rect height="5.73" width="1" x="10"></rect>
|
|
</g>
|
|
</svg>
|
|
|
|
<svg>
|
|
<g class="line" transform="translate(20,150) scale(6,-6)">
|
|
<path d="M0 10 L1 8 L2 13 L3 9 L4 11 L5 14 L6 6 L7 4 L8 12 L9 7 L10 5"></path>
|
|
</g>
|
|
</svg>
|
|
|
|
<svg>
|
|
<g class="line" transform="translate(20,150) scale(6,-6)">
|
|
<line x1="0" y1="7.46" x2="1" y2="6.7"></line>
|
|
<line x1="1" y1="6.7" x2="2" y2="12.74"></line>
|
|
<line x1="2" y1="12.74" x2="3" y2="7.11"></line>
|
|
<line x1="3" y1="7.11" x2="4" y2="7.81"></line>
|
|
<line x1="4" y1="7.81" x2="5" y2="8.84"></line>
|
|
<line x1="5" y1="8.84" x2="6" y2="6.08"></line>
|
|
<line x1="6" y1="6.08" x2="7" y2="5.39"></line>
|
|
<line x1="7" y1="5.39" x2="8" y2="8.15"></line>
|
|
<line x1="8" y1="8.15" x2="9" y2="6.42"></line>
|
|
<line x1="9" y1="6.42" x2="10" y2="5.73"></line>
|
|
</g>
|
|
</svg>
|
|
|
|
<svg>
|
|
<g class="filledLine" transform="translate(20,150) scale(6,-6)">
|
|
<path d="M0 0 L0 10 L1 8 L2 13 L3 9 L4 11 L5 14 L6 6 L7 4 L8 12 L9 7 L10 5 L10 0"></path>
|
|
</g>
|
|
</svg>
|
|
<svg>
|
|
<g class="filledLine" transform="translate(20,150) scale(6,-6)">
|
|
<path d="M0 0 L0 7.46 L1 6.7 L2 12.74 L3 7.11 L4 7.81 L5 8.84 L6 6.08 L7 5.39 L8 8.15 L9 6.42 L10 5.73 L10 0"></path>
|
|
</g>
|
|
</svg>
|
|
|
|
<svg>
|
|
<g class="scatterPlot" transform="translate(20,150) scale(6,-6)">
|
|
<circle r=".5" cx="10" cy="7.46"></circle>
|
|
<circle r=".5" cx="8" cy="6.77"></circle>
|
|
<circle r=".5" cx="13" cy="12.74"></circle>
|
|
<circle r=".5" cx="9" cy="7.11"></circle>
|
|
<circle r=".5" cx="11" cy="7.81"></circle>
|
|
<circle r=".5" cx="14" cy="8.84"></circle>
|
|
<circle r=".5" cx="6" cy="6.08"></circle>
|
|
<circle r=".5" cx="4" cy="5.39"></circle>
|
|
<circle r=".5" cx="12" cy="8.15"></circle>
|
|
<circle r=".5" cx="7" cy="6.42"></circle>
|
|
<circle r=".5" cx="5" cy="5.73"></circle>
|
|
</g>
|
|
</svg>
|
|
|
|
</body>
|
|
</html> |