折れ線グラフ

折れ線グラフは、データ点を線上にプロットする方法です。多くの場合、トレンドデータの表示や2つのデータセットの比較に使用されます。

const config = { type: 'line', data: data, };

const config = {
  type: 'line',
  data: data,
};

const labels = Utils.months({count: 7}); const data = { labels: labels, datasets: [{ label: 'My First Dataset', data: [65, 59, 80, 81, 56, 55, 40], fill: false, borderColor: 'rgb(75, 192, 192)', tension: 0.1 }] };

const labels = Utils.months({count: 7});
const data = {
  labels: labels,
  datasets: [{
    label: 'My First Dataset',
    data: [65, 59, 80, 81, 56, 55, 40],
    fill: false,
    borderColor: 'rgb(75, 192, 192)',
    tension: 0.1
  }]
};

データセットのプロパティ

名前空間

• data.datasets[index] - このデータセットのみのオプション
• options.datasets.line - すべての折れ線データセットのオプション
• options.elements.line - すべての線要素のオプション
• options.elements.point - すべての点要素のオプション
• options - グラフ全体のオプション

折れ線グラフでは、各データセットに対して多くのプロパティを指定できます。これらは、特定のデータセットの表示プロパティを設定するために使用されます。たとえば、線の色は一般的にこのように設定されます。

名前	型	スクリプタブル	インデックス可能	デフォルト
backgroundColor	色	はい	-	'rgba(0, 0, 0, 0.1)'
borderCapStyle	文字列	はい	-	'butt'
borderColor	色	はい	-	'rgba(0, 0, 0, 0.1)'
borderDash	number[]	はい	-	[]
borderDashOffset	number	はい	-	0.0
borderJoinStyle	'round'|'bevel'|'miter'	はい	-	'miter'
borderWidth	number	はい	-	3
clip	number|object|false	-	-	undefined
cubicInterpolationMode	文字列	はい	-	'default'
data	object|object[]| number[]|string[]	-	-	必須
drawActiveElementsOnTop	ブール値	はい	はい	true
fill	boolean|string	はい	-	false
hoverBackgroundColor	色	はい	-	undefined
hoverBorderCapStyle	文字列	はい	-	undefined
hoverBorderColor	色	はい	-	undefined
hoverBorderDash	number[]	はい	-	undefined
hoverBorderDashOffset	number	はい	-	undefined
hoverBorderJoinStyle	'round'|'bevel'|'miter'	はい	-	undefined
hoverBorderWidth	number	はい	-	undefined
indexAxis	文字列	-	-	'x'
label	文字列	-	-	''
order	number	-	-	0
pointBackgroundColor	色	はい	はい	'rgba(0, 0, 0, 0.1)'
pointBorderColor	色	はい	はい	'rgba(0, 0, 0, 0.1)'
pointBorderWidth	number	はい	はい	1
pointHitRadius	number	はい	はい	1
pointHoverBackgroundColor	色	はい	はい	undefined
pointHoverBorderColor	色	はい	はい	undefined
pointHoverBorderWidth	number	はい	はい	1
pointHoverRadius	number	はい	はい	4
pointRadius	number	はい	はい	3
pointRotation	number	はい	はい	0
pointStyle	pointStyle	はい	はい	'circle'
segment	object	-	-	undefined
showLine	ブール値	-	-	true
spanGaps	boolean|number	-	-	undefined
stack	文字列	-	-	'line'
stepped	boolean|string	-	-	false
tension	number	-	-	0
xAxisID	文字列	-	-	最初のx軸
yAxisID	文字列	-	-	最初のy軸

これらの値は、undefinedの場合、オプションの解決で説明されているスコープにフォールバックします。

一般

名前	説明
clip	chartAreaに対するクリッピング方法。正の値はオーバーフローを許容し、負の値はchartAreaの内側にそのピクセル数だけクリッピングします。0 = chartAreaでクリッピングします。クリッピングは、各辺ごとに設定することもできます。clip: {left: 5, top: false, right: -2, bottom: 0}
drawActiveElementsOnTop	データセットのアクティブな点を、データセットの他の点の上に描画します。
indexAxis	データセットの基本軸。水平線の場合'x'、垂直線の場合'y'。
label	凡例とツールチップに表示されるデータセットのラベル。
order	データセットの描画順序。スタッキング、ツールチップ、凡例の順序にも影響します。詳細
stack	このデータセットが属するグループのID（スタックされている場合、各グループは別々のスタックになります）。詳細
xAxisID	このデータセットをプロットするx軸のID。
yAxisID	このデータセットをプロットするy軸のID。

点のスタイル設定

各点のスタイルは、次のプロパティで制御できます。

名前	説明
pointBackgroundColor	点の塗りつぶしの色。
pointBorderColor	点の枠線の色。
pointBorderWidth	点の枠線の幅（ピクセル）。
pointHitRadius	マウスイベントに反応する、非表示の点のピクセルサイズ。
pointRadius	点の形状の半径。0に設定すると、点はレンダリングされません。
pointRotation	点の回転角度（度）。
pointStyle	点のスタイル。詳細...

これらの値は、undefinedの場合、最初にデータセットオプションに、次に関連するelements.point.*オプションにフォールバックします。

線のスタイル設定

線のスタイルは、次のプロパティで制御できます。

名前	説明
backgroundColor	線の塗りつぶしの色。
borderCapStyle	線のキャップスタイル。MDN (新しいウィンドウで開きます)を参照してください。
borderColor	線の色。
borderDash	ダッシュの長さと間隔。MDN (新しいウィンドウで開きます)を参照してください。
borderDashOffset	線ダッシュのオフセット。MDN (新しいウィンドウで開きます)を参照してください。
borderJoinStyle	線の結合スタイル。MDN (新しいウィンドウで開きます)を参照してください。
borderWidth	線の幅（ピクセル）。
fill	線の下の領域の塗りつぶし方法。面積グラフを参照してください。
tension	線のベジェ曲線の張力。直線を描画するには0に設定します。単調な3次補間を使用する場合は、このオプションは無視されます。
showLine	falseの場合、このデータセットの線は描画されません。
spanGaps	trueの場合、データがないかnullの点の間にも線が描画されます。falseの場合、nullデータを持つ点で線が途切れます。また、spanする最大ギャップ長を指定する数値にすることもできます。値の単位は、使用されるスケールによって異なります。

値がundefinedの場合、値は関連するelements.line.*オプションにフォールバックします。

インタラクション

各点とのインタラクションは、次のプロパティで制御できます。

名前	説明
pointHoverBackgroundColor	ホバー時の点の背景色。
pointHoverBorderColor	ホバー時の点の枠線の色。
pointHoverBorderWidth	ホバー時の点の枠線の幅。
pointHoverRadius	ホバー時の点の半径。

cubicInterpolationMode

次の補間モードがサポートされています。

• 'default'
• 'monotone'

'default'アルゴリズムは、カスタムの重み付き3次補間を使用しており、あらゆるタイプのデータセットで滑らかな曲線を生成します。

'monotone'アルゴリズムは、y = f(x)データセットに適しています。補間されるデータセットの単調性（または区分的な単調性）を維持し、局所的な極値（もしあれば）を入力データポイントに維持します。

変更されない場合（undefined）、グローバルなoptions.elements.line.cubicInterpolationModeプロパティが使用されます。

セグメント

線分スタイルは、segmentオブジェクト内のスクリプタブルオプションで上書きできます。現在、すべてのborder*とbackgroundColorオプションがサポートされています。セグメントスタイルは、各点間の線の各セクションに対して解決されます。undefinedはメインの線スタイルにフォールバックします。

ヒント

ギャップのスタイルを設定するには、spanGapsオプションを有効にする必要があります。

スクリプタブルセグメントのコンテキストには、次のプロパティが含まれています。

• type: 'segment'
• p0: 最初の点要素
• p1: 2番目の点要素
• p0DataIndex: データ配列内の最初の点のインデックス
• p1DataIndex: データ配列内の2番目の点のインデックス
• datasetIndex: データセットのインデックス

使用例

ステップ

steppedには、次の値がサポートされています。

• false: ステップ補間なし（デフォルト）
• true: ステップ前補間（'before'と等価）
• 'before': ステップ前補間
• 'after': ステップ後補間
• 'middle': ステップ中央補間

steppedの値をfalse以外の値に設定すると、tensionは無視されます。

デフォルトオプション

作成されたすべての折れ線グラフに設定を適用したいことはよくあります。グローバルな折れ線グラフの設定は、Chart.overrides.lineに格納されています。グローバルオプションの変更は、変更後作成されたグラフのみに影響します。既存のグラフは変更されません。

例えば、すべての折れ線グラフでspanGaps = trueに設定するには、次のようにします。

Chart.overrides.line.spanGaps = true;

データ構造

サポートされているすべてのデータ構造を折れ線グラフで使用できます。

積み上げ面積グラフ

Y軸の設定を変更して積み上げを有効にすることで、折れ線グラフを積み上げ面積グラフに設定できます。積み上げ面積グラフは、1つのデータトレンドが複数の小さな要素で構成されている様子を示すために使用できます。

const stackedLine = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            y: {
                stacked: true
            }
        }
    }
});

垂直折れ線グラフ

垂直折れ線グラフは、水平折れ線グラフのバリエーションです。これを実現するには、オプションオブジェクトのindexAxisプロパティを'y'に設定する必要があります。このプロパティのデフォルトは'x'であり、水平線が表示されます。

const config = { type: 'line', data: data, options: { indexAxis: 'y', scales: { x: { beginAtZero: true } } } };

const config = {
  type: 'line',
  data: data,
  options: {
    indexAxis: 'y',
    scales: {
      x: {
        beginAtZero: true
      }
    }
  }
};

const labels = Utils.months({count: 7}); const data = { labels: labels, datasets: [{ axis: 'y', label: 'My First Dataset', data: [65, 59, 80, 81, 56, 55, 40], fill: false, backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(255, 205, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(201, 203, 207, 0.2)' ], borderColor: [ 'rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgb(153, 102, 255)', 'rgb(201, 203, 207)' ], borderWidth: 1 }] };

const labels = Utils.months({count: 7});
const data = {
  labels: labels,
  datasets: [{
    axis: 'y',
    label: 'My First Dataset',
    data: [65, 59, 80, 81, 56, 55, 40],
    fill: false,
    backgroundColor: [
      'rgba(255, 99, 132, 0.2)',
      'rgba(255, 159, 64, 0.2)',
      'rgba(255, 205, 86, 0.2)',
      'rgba(75, 192, 192, 0.2)',
      'rgba(54, 162, 235, 0.2)',
      'rgba(153, 102, 255, 0.2)',
      'rgba(201, 203, 207, 0.2)'
    ],
    borderColor: [
      'rgb(255, 99, 132)',
      'rgb(255, 159, 64)',
      'rgb(255, 205, 86)',
      'rgb(75, 192, 192)',
      'rgb(54, 162, 235)',
      'rgb(153, 102, 255)',
      'rgb(201, 203, 207)'
    ],
    borderWidth: 1
  }]
};

設定オプション

垂直折れ線グラフの設定オプションは、折れ線グラフと同じです。ただし、折れ線グラフのX軸で指定されたオプションは、垂直折れ線グラフのY軸に適用されます。

内部データ形式

{x, y}