drawGraph-JSLibrary

JSのCanvas機能を使用したグラフ描画ライブラリです。 IEでは動作しない可能性があります。

使用方法

棒グラフ

<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>

実装予定機能一覧

棒グラフ

• 完了：単一の棒グラフの実装
• 完了：複数データの棒グラフへの拡張
• 　　：グラフ内にデータの表示
• 　　：縦軸の基準メモリ数値の表示
• 完了：マイナス値への対応
• 完了：縦軸基準のグラフ領域への点線の表示
• 完了：データ最大値により縦軸メモリを自動調整する（無効化可能）

折れ線グラフ

• 完了：グラフの実装
• 　　：グラフ内にデータの表示
• 完了：縦軸の基準メモリ数値の表示
• 完了：マイナス値への対応
• 完了：縦軸基準のグラフ領域への点線の表示
• 完了：グラフ最後尾に凡例を表示する
• 完了：データ最大値により縦軸メモリを自動調整する（無効化可能）

円グラフ

• 完了：円グラフの実装
• 完了：グラフ内に各データを表示
• 　　：グラフ内に各データ割合を表示

その他

• 完了：凡例の表示
• 完了：データ数の拡張（１６色まで拡張）
• 完了：グラフタイトルの表示
• 　　：使用方法のまとめ（README.mdの整理）
• 　　：棒グラフ、折れ線グラフに、最大、最小のデータ表示追加（フラグで表示非表示制御、デフォルトは表示）