底辺SE奮闘記

年収300万SEブログ

【JavaScript】Chart.jsで面グラフ（エリアグラフ）をプロットする

Javascript

はじめに

Chart.jsはドキュメントも充実しており、とても便利なのですが、面グラフに関しては理解に苦労しましたので、こちらにメモとして残しておきます。

環境

  • Chart.js 2.9.3

基本HTML

HTMLファイルは下記のようになっているとします。

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
</head>
<body>
    <div class="canvas-area">
        <canvas id="myChart"></canvas>
    </div>
<script>
//ここにスクリプトを書いていきます
</script>
</body>
</html>

面グラフ基本

基本的には下記の通りです。

面グラフは「下端データセット」と「下端データを参照するデータセット（上端データセット）」の二組からなります。

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: [
            1,2,3,4,5// 横軸の値
        ],
        datasets: [{
            data: [0,1,2,3,4],// エリア下端データセット
            fill:false,// エリア下端はfalseにしておくと良い
        },{
            data: [1,4,9,16,25],//エリア上端データセット
            //上端は下端の位置を設定する
            //以下の場合は1つ前を意味する
            fill: "-1",
            backgroundColor: 'pink',// エリアの色はこちらで指定する
        }]
    }
});

ソースないfillプロパティには下記の値が設定できます

値 意味
1,2,3,... 参照データセットの位置を絶対位置で指定する
"+1", "+2", "-1", "-2",... 参照データセットの位置を相対位置で指定する
"start", "origin" グラフ下端を参照
"end" グラフ上端を参照
false 塗りつぶさない（参照元のデータセットに指定すると良い）

面グラフと普通の折れ線グラフの共存

面グラフと折れ線グラフを共存させる場合は下記の通りです。一度わかってしまえば当たり前なのですが、煮詰まっている間は以外と分からないものです。

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: [
            1,2,3,4,5
        ],
        datasets: [{
            data: [0,1,2,3,4],
            fill: false,
        },{
            data: [1,4,9,16,25],
            fill: "-1",
            backgroundColor: 'pink',
        },{// 普通に配列に追加するだけです
            data:[10,11,12,13,14,15],
            fill: false, //falseにしておかないと面グラフに見えますね
            borderColor:"skyblue"
        }]
    }
});

終了

結果は下記の通りになります

f:id:uma-no-kawa:20200826175157j:plain