Chart.js - にほんご。

エリアチャート(Area)

更新日: 2018-07-05

折れ線グラフとレーダーチャートにはfillオプションがサポートされており、 2つのデータセット間の領域や、データセットと境界線との領域を作成するために使用できます。 (fillモードを参照)

注意:この機能はfillterプラグインで実装されています。

fillモード

modetype
データセットのインデックス*1number1, 2, 3, ...
データセットの相対インデックス*1string-1, -2, +1, ...
境界値*2stringstart, end, origin
無効化*3booleanfalse
*1 v2.6.0で塗りつぶしモードが実装されました。
*2 v2.6.0以前では、境界値はzerotopbottomでした。(非推奨)
*3 下位互換のためにfill: true(デフォルト)はfill: 'origin'と同等です。

new Chart(ctx, {
    data: {
        datasets: [
            {fill: 'origin'},      // 0: fillを'origin'にします。
            {fill: '+2'},          // 1: fillをデータセット3の値にします。(最終的に塗りつぶしません。)
            {fill: 1},             // 2: fillをデータセット1の値にします。(最終的に塗りつぶしません。)
            {fill: false},         // 3: 塗りつぶしません。
            {fill: '-2'}           // 4: fillをデータセット2の値にします。(最終的に塗りつぶしません。)
        ]
    }
})

設定

名称type初期値説明
plugins.filler.propagatebooleantrue対象データセットが非表示の時に、塗りつぶし効果を伝播させるかどうか。

propagate

boolean (初期値:true)

trueの場合、塗りつぶし効果を、可視データセットまで再帰的に拡張します*1

*1 少し分かりづらいですが、下記のデモを見比べてみてください。
データセットの表示/非表示の切替は、凡例をクリックすると切り替えることができます。

new Chart(ctx, {
    data: {
        datasets: [
            {fill: 'origin'},   // 0: fillを'origin'にします。
            {fill: '-1'},       // 1: fillをデータセット0の値にします。
            {fill: 1},          // 2: fillをデータセット1の値にします。(最終的に'origin'になります。)
            {fill: false},      // 3: 塗りつぶしません。
            {fill: '-2'}        // 4: fillをデータセット2の値にします。(最終的に'origin'になります。)
        ]
    },
    options: {
        plugins: {
            filler: {
                propagate: true
            }
        }
    }
})

propagate: true

  • 2(黄)が非表示の場合、4(緑)は1(赤)のfillを使用します。
    1(赤)のfill-1なので、0(青)のoriginになります。
  • 2(黄)と1(赤)が非表示の場合、4(緑)はoriginになります。
    4(緑)のfill-2ですが、2(黄)と1(赤)が非表示なので、 2要素分詰められる形で0(青)のoriginが適用されます。

propagate: false

  • 2(黄)か4(緑)、または両方が非表示の場合、4(緑)は塗りつぶしません。
  • 2(黄)は1(赤)のfillを参照し、1(赤)は0(青)のfillを参照するのでoriginになります。
    2(黄)を非表示にすると、fillが伝播されないので4(緑)はfillを参照できなくなり、塗りつぶしが無効化されます。

JavaScript

var data = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets:[{
    type: 'line',
    label: "0",
    data: [10, 11, 12, 13, 14, 15, 16],
    backgroundColor: "rgba(54, 162, 235, 0.2)",
    borderColor: "rgb(54, 162, 235)",
    borderWidth: 1,
    fill: 'origin',
  },
  {
    type: 'line',
    label: "1",
    data: [10, 12, 14, 16, 18, 20, 22],
    backgroundColor: "rgba(255, 99, 132, 0.2)",
    borderColor: "rgb(255, 99, 132)",
    borderWidth: 1,
    fill: '-1',
  },
  {
    type: 'line',
    label: "2",
    data: [10, 13, 16, 19, 22, 25, 28],
    backgroundColor: "rgba(255, 206, 86, 0.2)",
    borderColor: "rgb(255, 206, 86)",
    borderWidth: 1,
    fill: 1,
  },
  {
    type: 'line',
    label: "3",
    data: [10, 14, 18, 22, 26, 30, 34],
    backgroundColor: "rgba(201, 203, 207, 0.2)",
    borderColor: "rgb(201, 203, 207)",
    borderWidth: 1,
    fill: false,
  },
  {
    type: 'line',
    label: "4",
    data: [10, 15, 20, 25, 30, 35, 40],
    backgroundColor: "rgba(75, 192, 192, 0.2)",
    borderColor: "rgb(75, 192, 192)",
    borderWidth: 1,
    fill: '-2',
  }]
};
 
// propagate: true
var ctx = document.getElementById('myChart1').getContext('2d');
new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
      plugins: {
        filler: {
          propagate: true
        }
      },
    }
});
 
// propagate: false
var ctx = document.getElementById('myChart2').getContext('2d');
new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
      plugins: {
        filler: {
          propagate: false
        }
      },
    }
});

© 2013 Chart.js is available under the MIT license

このコンテンツはChart.jsドキュメントを翻訳/改変したものです。