캔버스와 css로 대비 가로 막대 그래프 만들기

19258 단어 CSS캔버스graphjQuery
텍스트를 복사할 수 있습니다.



index.html
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<script src="/js/jquery-3.3.1.min.js"></script>
<script src="bar.js"></script>
<link href="bar.css" rel="stylesheet">
<title>canvas描く対比横棒グラフ</title>
</head>
<body>
<div id="picture">
<canvas id="bar_area" width="800" height="400"></canvas>
<div class="blob1"></div>
</div>
<div class="bottom">
Jun/03/2017<p />
</div>
</body>
</html>

bar.css
/* ------------------------------------------------------------- */
/*
    bar.css

                    Jun/03/2017
*/
/* ------------------------------------------------------------- */
#picture {
    position: absolute;
    top: 0px;
    left: 0px;
}

.blob1{
    position: absolute;
    width: 500px;
    height: 500px;
    top: 0px;
    left: 0px;
}

.bottom{
    position: absolute;
    width: 500px;
    height: 500px;
    top: 350px;
    left: 0px;
}

/* ------------------------------------------------------------- */

bar.js
// -------------------------------------------------------------------------
//  bar.js
//
//                      Jun/02/2017
// -------------------------------------------------------------------------
jQuery  (function ()
{
    const file_json = "pacific.json"

    jQuery.getJSON (file_json,function (data)
        {
        bar_proc (data)
        })
})

// -------------------------------------------------------------------------
function bar_proc (data)
{
    var bar = document.getElementById('bar_area')
    var ctx = bar.getContext('2d')

    ctx.font = "18px 'ＭＳ Ｐゴシック'"
    ctx.strokeStyle = "black" 

    var yy = 30
    ctx.strokeText("パシフィック",250,yy)
    ctx.strokeText("勝利",420,yy)
    ctx.strokeText("敗北",150,yy)

    const xx = 250
    yy = 70
    ctx.strokeStyle = "blue"
    var str_teams = ""
    for (it in data)
        {
        const unit = data[it]
        draw_win_proc (ctx,xx+120,yy-18,unit.win)
        draw_lose_proc (ctx,xx-30,yy-18,unit.lose)

        const pos_left = 190 - unit.lose * 5
        const y_pos = yy - 18
        const str_div_a = '<div style="position:absolute; top:' + y_pos + 'px; left:'
        str_teams += str_div_a + pos_left + 'px;">' + unit.lose + '</div>'
        str_teams += str_div_a + xx + 'px;">' + unit.team + '</div>'
        const pos_right = 380 + unit.win * 5
        str_teams += str_div_a + pos_right + 'px;">' + unit.win + '</div>'


        yy += 50
        }

    jQuery (".blob1").html (str_teams)
}

// -------------------------------------------------------------------------
function  draw_win_proc (ctx,xx,yy,nn)
{
ctx.beginPath();
ctx.fillStyle = 'green'
    ctx.rect (xx,yy,nn*5,20)
    ctx.fill()
    ctx.closePath()
ctx.stroke();

}

// -------------------------------------------------------------------------
function  draw_lose_proc (ctx,xx,yy,nn)
{
ctx.beginPath();
ctx.fillStyle = 'red'
    ctx.rect (xx-nn*5,yy,nn*5,20)
    ctx.fill()
    ctx.closePath()
ctx.stroke();

}

// -------------------------------------------------------------------------

pacific.json
[
{"team": "楽天","win": 33,"lose": 12},
{"team": "ソフトバンク","win": 32,"lose": 20},
{"team": "西武","win": 26,"lose": 21},
{"team": "オリックス","win": 22,"lose": 27},
{"team": "日本ハム","win": 21,"lose": 28},
{"team": "ロッテ","win": 15,"lose": 35}
]

jquery-3.3.1.min.js에서 동작을 확인했습니다.
캔버스로 대비 수평 막대 그래프 만들기
React/Redux와 요소를 결합하여 사용

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage