arrays - Randomize heights Javascript -
i'm making little data-chart in javascript school. have make random button , have no idea how to? tried lot of thing nothing happening. idee? here code https://jsfiddle.net/gbfbvbj7
(function() { var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var height = -20; var xposnew = -950; var turning = 0; var button; var dataname = ["space invaders","street fighter ii","donkey kong","pac-man","asteroids","defender","ms. pac-man","centipede","galaxian","starhorse2","donkey kong jr.","mr. do!","tempest","mortal kombat ii","beatmania","q*bert","mortal kombat","robotron: 2084","dig dug","pole position","popeye","out run","pump up","missile command","jungle hunt","dragon's lair","berzerk","scramble","battlezone","stargate","mushiking: king of beetles","mahjong fight club 3","sega network mahjong mj4","star wars","super cobra","space duel","pong","breakout","oshare majo: love , berry","sea wolf"]; var datasales = [360000,200000,132000,400000,100000,60000,125000,55988,40000,38614,30000,30000,29000,27000,25000,25000,24000,23000,22228,21000,20000,20000,20000,18000,16000,15780,15136,15122,15000,13500,13000,12892,12695,12337,12038,12000,11000,10300,10000,9000]; function init() { button = document.queryselectorall('.randomize'); button[0].addeventlistener("click" , randomize); window.requestanimationframe(draw); text(); } function randomize(){ } function draw(){ height += 4; turning += 0.005; var maxbar = 0; var xpos = 0; var ypos = 555; var geel = 0; var blauw = 255; var groen = 255; var rotatie = 0; (var = 0; < datasales.length; i++) { maxbar = math.max(maxbar, datasales[i] / 800); rotatie += 0.157; geel += 6; blauw += 6; groen -= 6; xpos += 23; ctx.save(); ctx.beginpath(); ctx.translate(480, 400); ctx.fillstyle= "rgb(" + geel + "," + groen + "," + blauw + ")"; ctx.rotate(rotatie); ctx.rect(0,-155,15,-math.min(height, datasales[i] / 1800)); ctx.fill(); ctx.restore(); } window.requestanimationframe(draw); } function text(){ var rotatie2 = -1.48; var geel = 0; var blauw = 255; var groen = 255; (var = 0; < dataname.length; i++) { rotatie2 += 0.157; xposnew += 23; geel += 6; blauw += 6; groen -= 6; ctx.save(); ctx.translate( canvas.width - 1, 0); ctx.rotate(3 * math.pi / 2); ctx.font = "11px arial"; ctx.fillstyle= "rgb(" + geel + "," + groen + "," + blauw + ")"; ctx.textalign = "left"; ctx.filltext( dataname[i], -780, xposnew); ctx.restore(); } (var = 0; < datasales.length; i++) { rotatie2 += 0.1575; ctx.save(); ctx.beginpath(); ctx.translate(480, 400); ctx.rotate(rotatie2); ctx.fill(); ctx.fillstyle = "#fff"; ctx.font = "11px arial"; ctx.textalign = "left"; ctx.filltext( datasales[i], 95,0); ctx.restore(); } } init(); })();
use math.random()
:
function randomize() { // put new random values datasales (0-499,999) datasales = datasales.map(function() { return math.floor(math.random() * 500000); }); // clear canvas ctx.clearrect(0, 0, canvas.width, canvas.height); // redraw draw(); }
btw no reason use window.requestanimationframe(draw);
when not playing around animations, call draw
once , again when need redraw.
Comments
Post a Comment