1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70
| <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<script type="text/javascript">
var svgns = "http://www.w3.org/2000/svg";
var proportion = new Array(5, 6, 0, 9, 5, 10, 11, 4, 8, 5 ); // la tableau variable
var x = 50;
var y = 500;
var taille = 50;
var colors = ["#cc0022","#c38ec7","#ffff00","#00FF22","#0099cc","#9966cc","#660055","#660011","#c48189","#ee9a4d","#5efb6e","#95b9c7","#717d7d","#cc6622","#666362"];
function loadHisto(svgns, proportion){
var g = document.createElementNS(svgns, 'g');
g.setAttribute('id', 'histo');
//for (var i = 0; i < proportion.length; ++i){
var newPoints = x*0 + 0*taille + ',' + y + ' ' + (x*0 + 0*taille + taille) + ',' + y + ' ' + (x*0 + 0*taille + taille + 20) + ',' + (y - 20) + ' ' + (x*0 + 0*taille + 20) + ',' + (y - 20);
var polygon = document.createElementNS(svgns, 'polygon');
polygon.setAttribute('points', newPoints);
polygon.setAttribute('fill', colors[0]);
polygon.setAttribute('id', 'poly_'+0);
g.appendChild(polygon);
//}
document.getElementById('svg').appendChild(g);
//for (var i = 0; i < proportion.length; ++i){
var newPoints1 = x*0 + 0*taille + ',' + (y - 100) + ' ' + (x*0 + 0*taille + taille) + ',' + (y - 100) + ' ' + (x*0 + 0*taille + taille + 20) + ',' + (y - 120) + ' ' + (x*0 + 0*taille + 20) + ',' + (y - 120);
var anim = document.createElementNS(svgns, 'animate');
anim.setAttribute('attributeName', 'points');
anim.setAttribute('attributeType', 'XML');
anim.setAttribute('from', document.getElementById('poly_'+0).getAttribute('points'));
anim.setAttribute('to', newPoints1);
anim.setAttribute('begin', '0s');
anim.setAttribute('dur', '3s');
anim.setAttribute('fill', 'freeze');
anim.setAttribute('xlink:href', '#poly_'+0);
//}
document.getElementById('defs').appendChild(anim);
}
function loadChart(){
var svg = document.createElementNS(svgns, 'svg');
svg.setAttribute('id', 'svg');
svg.setAttribute('width', '100%');
svg.setAttribute('height', 800);
svg.setAttribute('x', 0);
svg.setAttribute('y', 0);
svg.setAttribute('viewBox', '0 0 1000 800');
svg.setAttribute('style', 'border:solid 1px black')
//svg.setAttribute('preserveAspectRatio', 'xMidYMid Slice');
document.getElementById('histoChart').appendChild(svg);
var defs = document.createElementNS(svgns, 'defs');
defs.setAttribute('id', 'defs');
document.getElementById('svg').appendChild(defs);
loadHisto(svgns, proportion);
}
</script>
<body onload="loadChart();">
<div id="histoChart">
</div>
</body>
</html> |