HTML5でgraph描画ライブラリの作成

HTML5のcanvas

HTML5で実装された「canvas」要素。２Dのグラフィックスの描画が可能となったということで、簡単にグラフを作成できないかと思い、作成してみました。

JavaScriptのES2016のお試しもかねて作成したのでIEでは動きません。

GitHubソース

これから少しずつ改善と機能追加していくつもり

使用方法

棒グラフ

<script>
    // データを二次元配列にて作成
    const GraphData = [
        ["1月",100  ,137 ,156],
        ["2月",200  ,32  ,176],
        ["3月",250  ,167 ,87],
        ["4月",120  ,367 ,257],
        ["5月",300  ,212 ,19],
        ["6月",80   ,78  ,91],
        ["7月",11   ,345 ,187],
        ["8月",0    ,198 ,99],
        ["9月",320  ,0   ,248],
        ["10月",278 ,10  ,378],
        ["11月",156 ,20  ,159],
        ["12月",367 ,30  ,234]
    ];
    // キャンバスのインスタンス生成(id,width,height)
    var MyCan = new drawGraph("MyCanvas",800,500);
    MyCan.drawBarGraph(GraphData);
</script>

<div id="MyCanvas"></div>

折れ線グラフ

<script>
    //データを二次元配列にて作成
    const GraphData = [
        ["1月",100  ,137 ,156],
        ["2月",200  ,32  ,176],
        ["3月",250  ,167 ,87],
        ["4月",120  ,367 ,257],
        ["5月",300  ,212 ,19],
        ["6月",80   ,78  ,91],
        ["7月",11   ,345 ,187],
        ["8月",0    ,198 ,99],
        ["9月",320  ,0   ,248],
        ["10月",278 ,10  ,378],
        ["11月",156 ,20  ,159],
        ["12月",367 ,30  ,234]
    ];
    // キャンバスのインスタンス生成(id,width,height)
    var MyCan = new drawGraph("MyCanvas",800,500);
    MyCan.drawLineGraph(GraphData);
</script>

<div id="MyCanvas"></div>

円グラフ

<script>
    // データを二次元配列にて作成
    const circleGraphData = [
        ['10代',60],
        ['20代',20],
        ['30代',30],
        ['40代',40],
        ['50代',50]
    ];
    // キャンバスのインスタンス生成(id,width,height)
    var MyCan = new drawGraph("MyCanvas",800,500);
    MyCan.drawCircleGraph(GraphData);
</script>

<div id="MyCanvas"></div>