【JavaScript】 jsonファイルを読み込み、Chart.jsでグラフ作ってみた【ミニ記事】〜Chart.jsを使ってみよう編〜　Part3

2023年11月30日2024年1月10日

概要

お待たせしました。

すぐに投稿すると言いましたが、お待たせしてしまいました。

STEP

PART 1 ローカルのjsonファイルを読み込む方法

STEP

PART2 jsonを配列にバラす方法

STEP

PART3 ローカルのjsonファイルを読み込み、Chart.jsでグラフ作ってみた

本記事

成果物

今回はオーソドックスな棒グラフにしてみました。

簡単にグラフを作ることができました！

コード

オプションなどは、使用しているChart.jsにより書き方が変わるので注意が必要です。

ドキュメントをよく読むことをお勧めします。

日本語のドキュメントも存在しますが、情報が古くなっている記述があるため公式ドキュメントを読む方が良いでしょう。

日本語ドキュメント

公式ドキュメント

HTML

<!DOCTYPE html>
<html lang="ja">

<head>

    <meta charset="utf-8">

    <title>グラフ</title> 
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>

</head>

<style>

    #ChartArea {

        display: flex;
        width: 75%;
        height: 75%;
        
    }

</style>

<body>

    <input type="file" accept=".json" id="filedata" onchange="readjson()">

    <h1>グラフ</h1>
    
    <div id="ChartArea"> 
        
        <canvas id="myChart"></canvas>
    
    </div>

</body>

<script>


    const ctx = document.getElementById('myChart');
    var Chartlabels=[];
    var Chartdata=[];
    var ChartColor=[];

   
    function Chartjs(){
    //データ読み込み後グラフが更新されない問題はm関数化することにより解決

        var Chartjs=new Chart(ctx, {

            //グラフのタイプ
            type: 'bar',

            data: {

                labels: Chartlabels,

                datasets: [{
                    //データ
                    data: Chartdata,
                    //グラフの色
                    backgroundColor: ChartColor,
                    borderWidth: 0.5,
                    
                    
                }]

            },

            options: {

                plugins:{

                
                    legend: {
                        //凡例は非表示
                        display: false
                 
                    }

                }
    
            }

        });

    }


    //ファイルを読み込む関数
    function readjson() {

        const file = document.getElementById("filedata").files[0];
        const reader = new FileReader();

    
        //ファイルの読み込み
        reader.readAsText(file);
        //ファイルが読み込まれた時発動。中身をjson形式で読みこむ
        reader.onload = (event) => {

            const data = JSON.parse(event.target.result);
            
            console.log(data);
            Split(data);

        };
        
    }

    //jsonをバラして配列に格納し、グラフを描写
    function Split(data){
        
        for(let loop=0;loop<3;loop++){

            Chartlabels[loop]=data.databases[loop].labels;
            console.log("ls:",Chartlabels[loop]);

            Chartdata[loop]=data.databases[loop].data;
            console.log("data:",Chartdata[loop]);

            ChartColor[loop]=data.databases[loop].backgroundColor;
            console.log("color:",ChartColor[loop]);

        }

        Chartjs();

    }


</script>


</html>

sample.json

{

    "databases":[
    
        {
    
            "labels":"コーラ",
            
            "data":"50",
            
            "backgroundColor":"rgba(255, 99, 132, 0.2)"
    
        },
    
        {
    
            "labels":"サイダー",
            
            "data":"20",
            
            "backgroundColor":"rgba(54, 162, 235, 0.2)"
        
        },
    
        {
    
            "labels":"緑",
            
            "data":"30",
            
            "backgroundColor":"rgba(75, 192, 192, 0.2)"
        
        }
    
    ]
    
}