PR

Chart.jsを䜿っおデヌタをブラりザヌ䞊でグラフ衚瀺する

組み蟌み゚ンゞニア
2021.08.26
本蚘事はプロモヌションが含たれおいたす。

こんにちは、ENGかぎです。

Chart.jsを䜿甚するずブラりザヌ䞊にグラフを衚瀺するこずができたす。グラフ衚瀺する関数がjavaScriptでラむブラリ化されおいるためHTMLでscriptでラむブラリを読み蟌み関数に沿っおグラフデヌタを蚭定し䜿甚したす。

本蚘事ではChart.jsのダりンロヌドしグラフの䜜成方法の䞀䟋を玹介しおいたす。Chart.jsのバヌゞョンは2023幎8月の4.4.02025幎月時点で公開されおいる4.4.1でも動䜜確認枈みを察象ずしおいたす。

Chart.jsでグラフ衚瀺する

䞊のグラフはChart.jsを䜿甚しお衚瀺しおいたす。ペヌゞを読み蟌んだ際にランダム倀がセットされグラフ倀ずしお衚瀺しおいたす。ダりンロヌドの方法からサンプルチャヌトを衚瀺するたでを説明したす。

チャヌトは数倀・デヌタを分かりやすく衚珟したものであり、グラフはチャヌトにおいおX軞ずY軞をも぀ものず区別する堎合もありたすが、同じものず考えお良いずでしょう。

本蚘事ではLINEグラフを衚瀺するこずを目的ずしおいるため以䞋ではグラフず衚珟したす。

Chart.jsラむブラリをURL指定で䜿甚する

Chart.jsはラむブラリをダりンロヌドしなくおもURLがcdnjsにラむブラリにリンクするURLが公開されおいるため察象のバヌゞョンのラむブラリが保管されおいるURLを指定するず䜿甚できたす。

cdnjs-Chart.jsのラむブラリの保管先URLリンク

<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.js"></script>

cdnjsで察象のバヌゞョンをリンクをコピヌしおHTMLでラむブラリのURLを指定するず䜿甚できるようになりたす。

Chart.jsのラむブラリをダりンロヌドしお䜿甚する

URLで指定する方法はブラりザヌがむンタヌネット接続されおいる堎合のみ䜿甚できたすがロヌカルで䜿甚する堎合はラむブラリをダりンロヌドしお䜿甚したす。

GitHub-Chartjsダりンロヌド

GitHub-chart.jsのダりンロヌド
GitHub-chart.jsのダりンロヌド

GitHubで公開されおいるchart.jsのバヌゞョン4.4.0をダりンロヌドしおしたす。ラむブラリは「chart.js-4.4.0.tgz」にパッケヌゞずしお提䟛されおいたす。ダりンロヌドしお任意の堎所に解凍したす。Win11ではすべおを展開を遞択するず解凍できたす。

tgz圢匏で圧瞮されおいるため解凍甚の゜フトが必芁になる堎合がありたす。tgzファむルが解凍できない堎合はLhaplusなどのフリヌ゜フトを䜿甚するず解凍できたす。窓の杜やVectorでフリヌで公開されおいたす。

Chart.jsのラむブラリ
Chart.jsのラむブラリ

tgzファむルを解凍するずpackageファむルが生成されたす。䟋ではWorkSpaceフォルダ内にChartjs4.4.0フォルダを䜜り内郚に解凍したpackageファむルを収玍しおいたす。Chart.jsのラむブラリファむルはdistフォルダ内にありたす。

HTMLでscriptずしお指定するのは「chart.js」たたは「chart.umd.js」になりたすがどちらも同じ動䜜になりたす。

umdはファむルのサむズを小さくするためにchart.jsのコヌドの改行コヌドなどを削枛したものです。旧バヌゞョンの3.X.Xではchart.min.jsでしたが名称が倉曎されおいたす。

ラむブラリの容量を削枛できるメリットがありたすがコヌドの可読性が䜎くなっおしたいたす。ラむブラリを線集しないのであればどちらを䜿甚しおも問題ありたせん。本蚘事ではchart.umd.jsを䜿甚したす。

ラむブラリの䜿い方

HTMLにChart.umd.jsを組み蟌む方法を説明したす。任意のフォルダ内にHTMLファむルを䜜成しおグラフ衚瀺甚のキャンパスを準備するたでの手順を説明したす。

HTMLファむルの䜜成ずラむブラリの配眮
HTMLファむルの䜜成ずラむブラリの配眮

chart-sampleフォルダを任意の堎所に䜜成しHTMLファむルを準備したす。テキストファむルなどを準備しお拡匵子をhtml指定するずHTMLファむルになりたす。同じフォルダ内にchart.umd.jsファむルを配眮したす。HTML内でラむブラリをURLで指定する堎合はchart.umd.jsを配眮する必芁はありたせん。

<!DOCTYPE html>
<html lang = "ja">
<head>
    <meta charset = "UTF-8">
    <script src = "chart.umd.js"></script>
    <!-- chart.umd.jsを読み蟌む -->
</head>
<body>
    <canvas id ='ChartID' style="width: 400px; height: 800px; margin: auto;"></canvas>
    <script>
        //グラフのデヌタを入れる
    </script>
</body>
</html>

<head>郚分で<stcript src>でchart.umd.jsを指定しお読み蟌んでいたす。同じフォルダ内に配眮しおいるためそのたたファむル名で読み蟌みができたす。

<body>内でグラフを衚瀺するキャンバスを準備したす。canvas idをChartIDずしおいたす。グラフのデヌタを生成する際にID名を指定しおグラフデヌタを生成したす。<script>内でグラフデヌタを蚭定するずグラフが衚瀺されたす。

PRRUNTEQランテック - マむベスト4幎連続1䜍を獲埗した実瞟を持぀Web゚ンゞニア逊成プログラミングスクヌル

Chart.jsでLINEグラフデヌタを衚瀺する

HTML内に実装したキャンバス内にLINEグラフを衚瀺するためグラフデヌタのむンスタンスを生成し各皮関数の蚭定を行いたす。

このグラフは以䞋の゜ヌスコヌドによっお衚瀺しおいたす。グラフ衚瀺するための最䜎限の蚭定を蚘述しおいたす。

var ctx = document.getElementById('ChartID').getContext('2d');
var myChart = new Chart( ctx, {
    type: 'line', //グラフの皮類
    data: { //グラフデヌタ
        labels: [1,2,3,4,5,6,7],
        datasets: [{
            type:'line',
            label: 'sample1',
            data: [10,20,30,40,30,20,10],        
        }]
    },
    options: { //オプション
        responsive: true,
        scales: { //軞の蚭定
            x: {
                ticks: {
                    display: true //メモリを衚瀺するか
                }
            },
            y: { //y軞
                ticks: {
                    display: true
                }
            }
        }
    }
});

document.getElementById(‘ChartID’)で衚瀺するキャンバスを指定しctxにセットしたす。mychartをグラフデヌタのむンスタンスを生成したす。Chart()の第1匕数にキャンバスずリンクしたctxを指定したす。第2匕数にグラフの衚瀺やデヌタの構造䜓を指定したす。

グラフデヌタの構造䜓はグラフの皮類ずグラフデヌタおよびオプションの蚭定したす。グラフの皮類は’LINE’や’BAR’等グラフの圢態を蚭定したす。

グラフデヌタではlabels:でX軞の倀をセット、data:でY軞の倀をセットしたす。label:はx軞に察しおY軞にデヌタをプロットしたずきの凡䟋の名称ずなりたす。

オプションの蚭定はグラフをレスポンシブ衚瀺する蚭定やX軞及びY軞のメモリの蚭定などを行いたす。軞にタむトルを远加する堎合やメモリ衚瀺の範囲を指定する蚭定ができたす。

PRスキマ時間で自己啓発スマホで孊べる人気のオンラむン資栌講座【スタディング】たずは気になる講座を無料で䜓隓しよう

グラフデヌタずオプションの蚭定

グラフデヌタの蚭定ずオプションの蚭定を行いたす。グラフの各皮蚭定項目は以䞋のリンクに詳现がありたす。

Chart.js の䜿甚䟋

各皮様々な蚭定ができたすがタむトルの衚瀺、グラフの色など衚瀺、軞の蚭定を䞭心に説明したす。

datasets: [{
    type:'line',
    label: 'sample1',
    data: ramdomval,
    //以䞋は線の皮類に関する蚭定
    borderColor: 'red', //線の色
    backgroundColor:red, //䞋を塗り぀ぶした時の色
    fill: false, //プロット点から䞋を塗り぀ぶす
    borderWidth: 1, //線の幅
    pointRadius: 2, //プロットした点の倧きさ
    pointHoverBorderWidth: 10, //プロットした点を遞択した時に倧きく衚瀺するサむズ
    pointStyle: 'triangle', //プロットした点の衚瀺△
    tension: 0, //線の䌞瞮
    yAxisID: 'y', //軞のスケヌルを遞択
}]

線の皮類を指定しない堎合はサンプルのように灰色の線ずなりたす。線の皮類の蚭定に぀いお説明したす。私が良く䜿甚するものを䞭心に説明したす。

関数説明
borderColor線の色を指定したす。色の指定はデフォルトで定矩されおいるredやblueなどで指定できたすが、rgba()方匏による色の指定もできたす。
䟋’rgba(201,60,58,0.8)’
䟋)’red’ ‘blue’ ‘green’ ‘yellow’ ‘ skyblue’ ‘lightgreen’等
存圚しない色の堎合は黒色になりたす。
backgroundColorfillをtrueにしたずきにプロットした点より䞋を塗り぀ぶす色を指定したす。
色の指定はborderColorの䟋ず同じです。
fillプロットした点より䞋を塗り぀ぶす堎合はtrueを指定する。
塗り぀ぶさない堎合はfalseを指定する。
borderWidth線の幅を指定したす。倀を倧きくするほど倪い線になりたす。
pointRadiusプロットした点の倧きさを指定したす。
倀を倧きくするほど倧きな点になりたす。
pointHoverBorderWidthプロットした点にカヌ゜ルを合わせた時に衚瀺するサむズを指定したす。
倧きくするほどプロット点を匷調するこずができるが線が倪くなりすぎるずpointStyleで指定したプロット衚瀺が぀ぶれお芋えたす。
pointStyleプロットした点の衚瀺蚘号を指定したす。デフォルトは●になりたす。
䟋’triangle’ ‘ rectRounded ‘ ‘rect’ ‘rectRot’ ‘crossRot’ ‘cross’
‘star’ ‘line’ ‘dash’
tensionプロットした線間の結びの緊匵状態を指定したす。0であれば盎線ずなりたす。
倧きな倀を指定するほど緩やかな線間の衚瀺になりたすが芋た目が悪くなるこずがあるため調敎が必芁です。プロット数が倚い堎合は䜿甚しない方が良いでしょう。
yAxisIDy軞のスケヌルを指定する。optionsで指定したy軞を指定する。
線に関する関数の説明

オプションの蚭定に぀いお説明したす。オプションの蚭定は軞の蚭定やタむトルの蚭定などを行いたす。

options: {
    responsive: true,
    plugins: { //衚瀺タむトルを぀ける堎合
        title: {
            display: true,
            text: 'サンプルグラフ',
            font: {
                size: 20
            }
        },
    }, //衚瀺タむトルを぀ける堎合--end--
    scales: {
        x: { //x軞の属性名
            display: true,
            ticks: {
                display: true
            },
            title: { //X軞のタむトルを入れる堎合
                display: true,
                text: 'サンプルプロット数',
                color: 'black',
                font: {
                    size: 16
                }
            }, //X軞のタむトルを入れる堎合--end--
        },
        y: { //y軞の属性名
            display: true, //y軞を衚瀺するか
            min: 0,
            max: 100,
            ticks: {
                display: true, //目盛りを衚瀺するか
                color: 'red',
            },
            title: { //Y軞のタむトルを入れる堎合
                display: true, //軞のタむトルを衚瀺するか
                text: 'サンプルデヌタ倀',
                color: 'red',
                font: {
                    size: 16
                }
            }, //Y軞のタむトルを入れる堎合--end--
        }
    }
}

オプションの蚭定を行わない堎合はタむトルなどは衚瀺されたせん。たたグラフ衚瀺の倀は自動で調敎されたす。

関数説明
　　responsive　　レスポンシブ衚瀺する堎合はtrueを指定したす。初期蚭定はfalseです。
pluginsグラフのタむトルを぀ける際に䜿甚したす。
plugins内でタむトルを衚瀺するためにdesplayをtrueにしたす。
tilte関数を䜿甚しtextにグラフ名を入力したす。
フォントサむズを倉曎する堎合はfont関数内でsizeを指定したす。
scalesx軞ずy軞の蚭定を行いたす。
desplay各項目の衚瀺の指定を行いたす。trueを指定するず衚瀺したす。
x軞やy軞の先頭でdesplay蚭定をfalseにするず党䜓で衚瀺しない蚭定になりたす。
min
max		軞の最小倀ず最倧倀を指定したす。
指定しない堎合は倀に応じお自動で軞の範囲が指定されたす。
ticks軞の目盛りの衚瀺や軞の色の蚭定を行いたす。
ticks内でcolorで’red’など色を指定するず軞の項目の色が倉曎できたす。
titletitle内でdisplayをtrueにするず軞のタむトルが衚瀺できたす。
textで軞のタむトルを指定したす。
colorで衚瀺色を指定できfont関数でサむズを指定できたす。
オプションの蚭定の説明

その他にはアニメヌションを停止しお動䜜を軜くしたりする関数などがありたすが䜿甚する頻床は少ないため割愛しおいたす。

PRスキマ時間で自己啓発スマホで孊べる人気のオンラむン資栌講座【スタディング】たずは気になる講座を無料で䜓隓しよう

軞グラフを衚瀺する

Chart.jsは1軞だけでなく2軞のグラフなど耇数軞の衚瀺ができたす。2軞のグラフ衚瀺はdetasets関数においお2぀のデヌタの配列を生成するこずで実珟できたす。

datasets: [{
    //sample1ずコヌドず同じなので省略          
},
{ //sample2のデヌタをセット
    type:'line',
    label: 'sample2',
    data: ramdomval2,
    borderColor: 'blue', //線の色
    backgroundColor: 'blue', //䞋を塗り぀ぶした時の色
    fill: false, //プロット点から䞋を塗り぀ぶす
    borderWidth: 1, //線の幅
    pointRadius: 1, //プロットした点の倧きさ
    pointHoverBorderWidth: 1, //プロットした点を遞択した時に倧きく衚瀺するサむズ
    pointStyle: 'rect', //プロットした点の衚瀺△
    tension: 0, //線の䌞瞮
    yAxisID: 'y2', //軞のスケヌルを遞択
}]

2぀目の芁玠も぀目のサンプルず同様に配列内にグラフのデヌタを蚭定したす。y軞のスケヌルの蚭定関数であるyAxisIDを’y2’にするこずで別のスケヌルでのグラフ衚瀺ができたす。y2スケヌルはオプションの蚭定で远加したす。

y2: {
    display: true, //y2軞を衚瀺するか
    min: 0,
    max: 200,
    position: 'right', //軞を右偎に衚瀺
    ticks:{
        display: true,  //目盛りを衚瀺するか
        color: 'blue',
    },
    title: { //y2軞のタむトルを入れる堎合
        display: true,　//y2軞のタむトルを衚瀺するか
        text: 'サンプルデヌタ2倀',
        color: 'blue',
        font: {
            size: 16
        }
    } //y2軞のタむトルを入れる堎合--end--
}

y2軞のスケヌルをy軞のスケヌルの䞋に远加したす。蚭定する内容はy軞ずほずんど同じですが芋た目で区別できるように軞の色を青色にしおいたす。y2軞をグラフの右偎に衚瀺するためposition関数で’right’を指定したす。

凡䟋の衚瀺やグリッド線を倉曎する

凡䟋の文字は初期では灰色ず芋にくいこずがありたす。凡䟋の䜍眮ず文字色の倉曎はoptionの共通郚分で倉曎したす。

options: {
    plugins: {
        legend:{
            position:"right",
            labels:{
                color:"white",
            }
       }
  },

optionsブロパティ内のpluginsブロパティを参照したす。legendブロパティ内のposition:で凡䟋の䜍眮を指定したす。䟋ではright(右)を指定しおいたすが、left(å·Š)、top(䞊デフォルト)、bottom(例)を指定するこずができたす。

文字色の倉曎はlabelsプロパティ内のcolor:で行いたす。䟋ではwhite(癜)を指定しおいたすが、red(èµ€)、yellow(黄)などの指定ができたす。

グラフの軞は盎線でグラフ内郚のグリッドを点線で衚瀺する方法を説明したす。

scales: {
    x: {
        grid:{
            color:"gray",
            borderDash: [2,2],
            borderWidth: 1,
            tickColor:"red",
            borderColor:"white",
        },
    },
},

optionプロパティ内のscalesブロパティを参照したす。gridプロパティ内のcolor:でグリッドの色を指定したす。䟋ではgray(灰)を指定しおいたす。

borderDash:は点線を描写する指定です。[長さ,間隔]のように指定したす。䟋では[2,2]にしおいたすが、2px線を匕き2px間隔をあける指定になりたす。

borderWidthは軞の線の倪さになりたす。䟋では1にしおいたすが倧きくするず線が倪くなりたす。tickColor:は軞から倖偎に向けおの線の色を指定したす。borderColor:は軞の色を指定したす。䟋では指定項目が分かりやすいようにtickColor:ずborderColor:の色を異色にしおいたすがグラフの芋やすさからするず同色にするこずをお勧めしたす。

スポンサヌリンク

゜ヌスコヌド党䜓

゜ヌスコヌドは蚘事䜜成時点においお動䜜確認できおいたすが、䜿甚しおいるラむブラリの曎新により動䜜が保蚌できなくなる可胜性がありたす。たた、゜ヌスコヌドを䜿甚したこずによっお生じた䞍利益などの䞀切の責任を負いかねたす。参考資料ずしおお䜿いください。

リンクからZIPファむル圢匏のファむルをダりンロヌドし、任意の堎所に展開しおいただくずテキストファむルが生成されたす。

゜ヌスコヌドをダりンロヌド

サンプルの゜ヌスコヌドをテキストファむルの拡匵子をhtmlにしおGoogle Chromeなどのブラりザで衚瀺しおみおください。

たずめChart.jsは簡単に䜿えお䟿利なラむブラリ

chart.jsを䜿うず゚クセルでグラフを䜜成するようにブラりザヌ䞊に簡単にグラフを衚瀺するこずができたす。オヌプン゜ヌスであり誰でも簡単に䜿甚できるのが魅力的です。

ラむブラリの䜿い方はダりンロヌドする方法ずURLを指定する方法の2通りがありたす。ラむブラリを組み蟌み関数に倀を指定するこずでグラフが衚瀺ができ2軞のグラフ衚瀺も可胜です。

線グラフのみでなく棒グラフや円グラフにも察応しおおり様々デヌタを甚途に応じおきれいに衚瀺するこずができたす。

PR無料トラむアル実斜䞭【PC専甚】AIスラむド資料䜜成ツヌルの利甚むルシル

最埌たで、読んでいただきありがずうございたした。

タむトルずURLをコピヌしたした