Chart.js - にほんご。

折れ線グラフ(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番目以降も同様です。

名称type説明
labelstring凡例とツールチップに表示するデータセットのラベル。
xAxisIDstringデータセットをプロットしたX軸のid。 未指定の場合、最初のX軸のidになります。
yAxisIDstringデータセットをプロットしたY軸のid。 未指定の場合、最初のY軸のidになります。
backgroundColorcolor線の下側を塗りつぶす色。カラーを参照してください。
borderColorcolor線の色。カラーを参照してください。
borderWidthnumber線の太さ(px)。
borderDashnumber[]線の長さとスペース間隔(ダッシュ構成)。 (MDNを参照してください。)
borderDashOffsetnumberダッシュのオフセット。 (MDNを参照してください。)
borderCapStylestring線の先端のスタイル。 (MDNを参照してください。)
borderJoinStylestring線の接合点のスタイル。 (MDNを参照してください。).
cubicInterpolationModestring離散データのポイントから滑らかな線を補間するアルゴリズム。 詳しくはこちら
fillboolean/string線の下をどのように塗りつぶすか。エリアチャート(Area)を参照してください。
lineTensionnumberベジェ曲線のテンション(張力)。 0を指定すると直線になります。 cubicInterpolationModemonotoneを指定している場合、このオプションは無視されます。
pointBackgroundColorcolor/color[]ポイントを塗りつぶす色。
pointBorderColorcolor/color[]ポイントの枠線の色。
pointBorderWidthnumber/number[]ポイントの枠線の太さ(px)。
pointRadiusnumber/number[]ポイントの半径。0を指定した場合、ポイントは非表示になります。
pointStylestring/string[]/image/image[]ポイントのスタイル。 詳しくはpointスタイルを参照してください。
pointHitRadiusnumber/number[]マウスイベントを発生させる非表示ポイントのサイズ。
pointHoverBackgroundColorcolor/color[]ホバーした時のポイントの背景色。
pointHoverBorderColorcolor/color[]ホバーした時のポイントの枠線の色。
pointHoverBorderWidthnumber/number[]ホバーした時のポイントの枠線の太さ。
pointHoverRadiusnumber/number[]ホバーした時のポイントの半径。
showLinebooleanfalseを指定した場合、そのデータセットを非表示にします。
spanGapsbooleantrueを指定した場合、データにnullがあったとしても、線を補間表示します。 falseを指定した場合、NaNのポイントで線を切って表示します。
steppedLineboolean/string線がステップラインで表示されている場合の設定。詳細はこちら

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補間。

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

設定オプション

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

名称type初期値説明
showLinesBooleantruefalseの場合、ポイント間の線を表示しません。
spanGapsBooleanfalsefalseを指定した場合、NaNのポイントで線を切って表示します。

デフォルトオプション

通常、生成する全ての折れ線グラフに構成オプションを適用します。 グローバルオプションは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)のような、疎なデータセットに使用されます。 それぞれのデータにはxyを含むオブジェクトを指定します。

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

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

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

折れ線グラフのパフォーマンス向上

大量のデータをグラフ化する場合、チャートの表示時間がとても長くなるかもしれません。 この場合、以下の方法でパフォーマンスを向上させることができます。

データの間引き

一部のデータを間引きすることで、最良の結果を生成することができます。 グラフに表示するデータが多い場合、数百ピクセルの幅のグラフに、 数万点のデータを表示するのは意味がありません。

データの間引きについては多くのアプローチがあり、 間引きアルゴリズムの選択は、データの状態と、どのような結果が欲しいかに依存します。 例えば、min/max間引きアルゴリズムは データのピーク(頂点)を保持しますが、ピクセル毎に最大4ポイント(点)必要になる可能性があります。 この間引きアルゴリズムは、ピークの表示が必要で、データにノイズが多い場合に上手く動きます。


ベジェ曲線の無効化

チャートを描画する際に、ベジェ曲線を無効化し、直線で描画するとパフォーマンスが向上します。 ベジェ曲線を無効化するには以下のように指定します。

new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        elements: {
            line: {
                tension: 0, // ベジェ曲線無効化
            }
        }
    }
});

線描画の無効化

大量のデータポイントがある場合、線の描画を無効化し、 ポイント(点)で描画する方が効果的です。 これは、キャンバスの描画要素が減るため、パフォーマンスの向上することを意味します。

線を無効化するには以下のように指定します。

new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            showLine: false, // 指定したデータセットのみ無効化。
        }]
    },
    options: {
        showLines: false, // 全てのデータセットで無効化。
    }
});

アニメーションの無効化

チャートのレンダリング時間が長い場合、アニメーションを無効化するのも一つの方法です。 こうすると、ページの更新中に何度もレンダリングせずに、1回だけレンダリングすることになります。 これによりCPUの使用率を減らし、一般的なページパフォーマンスを向上させます。

アニメーションを無効化するには以下のように指定します。

new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        animation: {
            duration: 0, // 通常のアニメーション時間。
        },
        hover: {
            animationDuration: 0, // ホバー中のアニメーション時間。
        },
        responsiveAnimationDuration: 0, // リサイズ後のアニメーション時間。
    }
});

© 2013 Chart.js is available under the MIT license

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