折れ線グラフ(Line)

折れ線グラフ(LineChart)は、データの点を線上にプロットするチャートです。 トレンドデータの表示や、2つのデータの比較等によく使われます。

使用例

var myLineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});

データセットプロパティ

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

new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      borderColor: "rgb(75, 192, 192)",
    }]
  },
});

全てのpoint～プロパティは配列を指定することができます。 これらに配列が指定されている場合、最初の値は、最初のポイントの設定として適用され、 2番目の値は、2番目のポイントとして適用され、3番目以降も同様です。

全般

ポイントスタイル

各ポイントのスタイルは以下のプロパティで指定することができます。

undefinedの場合、どのプロパティも関連するelements.point.*にオプションにフォールバックします。

ラインスタイル

線のスタイルは以下のプロパティで指定することができます。

undefinedの場合、showLineとspanGapsは関連する設定オプションにフォールバックします。 その他のプロパティはelements.line.*にオプションにフォールバックします。

インタラクション

各ポイントのインタラクションは以下のプロパティで指定することができます。

cubicInterpolationMode

以下の補間がサポートされています。

• default
• monotone

defaultアルゴリズムはカスタム加重3次補間を使用し、 全てのデータセットに対して綺麗な曲線を生成します。

monotoneアルゴリズムはy = f(x)データセットに適しています。 補間されるデータの単調性(または区分的単調性)を保持し、 極値(存在する場合)を固定させます。

このプロパティがundefinedの場合、 options.elements.line.cubicInterpolationModeプロパティが使用されます。

ステップライン

steppedLineには以下の値を指定することができます。

• false : ステップ補間しない。(デフォルト)
• true : step-before補間。('before'と同等)
• 'before' : step-before補間。
• 'after' : step-after補間。
• 'middle' : step-middle補間。

steppedLineにfalse以外の値が設定されている場合、 lineTensionは無視されます。

設定オプション

折れ線グラフには以下の設定オプションが定義されています。 これらのオプションは、グローバルのオプションChart.defaults.globalとマージされ、 チャートに渡されるオプションを生成します。

デフォルトオプション

通常、生成する全ての折れ線グラフに構成オプションを適用します。 グローバルオプションはChart.defaults.lineに格納されます。 グローバルオプションを変更すると、変更後に生成されたチャートにのみ反映され、 すでに生成済みのチャートは変更されません。

例えば、spanGaps = trueを全ての折れ線グラフに反映させるには、 以下のように指定します。

Chart.defaults.line.spanGaps = true;

データ構造

折れ線グラフのデータセットにあるdataプロパティは、 2種類の形式を指定することが可能です。

number[]

data: [20, 10]

dataが数値配列の場合、通常X軸はカテゴリ軸になります。 ポイント(点)は、配列内の値を使用して、軸上に配置します。 カテゴリ軸を使ってチャートを生成した場合、データオブジェクトのlabelsプロパティを指定する必要があります。

point[]

data: [{
        x: 10,
        y: 20
    }, {
        x: 15,
        y: 10
    }]

散布図(ScatterChart)のような、疎なデータセットに使用されます。 それぞれのデータにはx、yを含むオブジェクトを指定します。

積み上げエリアチャート(StackedAreaChart)

折れ線グラフはY軸の設定を積み上げ可能に変更することで、 積み上げのエリアチャートを生成することができます。 積み上げエリアチャートは、あるデータが複数の小さなデータで構成されていることを示すために使われます。

var stackedLine = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            yAxes: [{
                stacked: true
            }]
        }
    }
});