canvans絵画柱状図

前回はcanvas絵画の基礎知識を学びましたが、今日はcanvasの知識で柱状図を描きましょう.

//       
 

// body       

    


    

    var c = document.getElementById('mycanvas');//    
    var stx = c.getContext('2d');//              。

    var data = {
        x: ['  ', '  ', '  ', '  ', '  ', '  '],
        y: ['0', '100', '200', '300', '400', '500', '600', '700', '800', '900', '1000'],
        val: ['300', '210', '120', '560', '800', '660'],
        col: ['red', 'green', 'blue', 'skyblue', 'black', 'pink']
    }//           

    //xy     
    //x

    stx.translate(80, 600);
    stx.beginPath();//     
    stx.moveTo(0, 0);//x    
    stx.lineTo(500, 0);//  
    stx.strokeStyle = 'blue';//     
    stx.stroke();//  
    stx.closePath()//    

    //y
    stx.beginPath();
    stx.moveTo(0, 0);
    stx.lineTo(0, -600);
    stx.strokeStyle = 'blue';
    stx.stroke();
    stx.closePath();


    stx.textBaseline = 'middle';//    

    for (var j in data.y) {
        stx.beginPath();
        stx.fillText(data.y[j], -30, -j * 50);
        stx.moveTo(0, -j * 50);
        stx.lineTo(-5, -j * 50);
        stx.stroke();
        stx.closePath()

    }
    stx.textAlign='center';//    
    for(var i=0;i<data.val.length;i++){ 
        stx.beginPath(); 
        stx.moveTo((i+1)*60,0); 
        stx.lineTo((i+1)*60,-data.val[i]/2); 
        stx.lineWidth=40; //
        stx.strokeStyle=data.col[i]; 
        stx.stroke(); 
        stx.closePath(); 
        stx.beginPath(); 
        stx.fillText(data.x[i],(i+1)*60,10); //     
        stx.fillText(data.val[i],(i+1)*60,-data.val[i]/2-10) //     
        
    }