線グラフ

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

使用例

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

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

線グラフでは、各データセットにいくつかのプロパティを指定できます。これらは、特定のデータセットの表示プロパティを設定するために使用されます。例えば、線の色は一般的にこの方法で設定されます。

すべてのpoint~というプロパティは配列として指定できます。これらが配列値に設定されている場合、最初の値は最初の点に適用され、2番目の値は2番目の点に適用されます。

(訳注: sandbox)

キュービック補間モード

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

• 'default'
• 'monotone'.

'default'(デフォルト)アルゴリズムは、すべてのタイプのデータセットに対して快適なカーブを生成するカスタム加重(custom weight)キュービック補間を使用します。

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

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

階段グラフ

steppedLine(階段グラフ)では以下の値がサポートされています：

• false: 階段状補間なし（デフォルト）
• true: Step-before補間（訳注: 右値で補間。'before'と同じ）
• 'before': Step-before補間。(訳注: 右値で補間)
• 'after': Step-after補間。(訳注: 左値で補間)

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
    }]

こちらの選択肢は、散布図などの疎データセットに使用されます。各データポイントは、'x'および'y'プロパティを含むオブジェクトを使用して指定されます。

積み上げ面グラフ

線グラフは、y軸の積み上げ設定を有効にすることによって、積み上げ面グラフとして使うことができます。 積み上げ面グラフは、あるデータトレンドがどのような小さな要素が集まって形作られているかを示すために使用できます。

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

線グラフの表示を早くする

多くのデータをグラフ化すると、チャートのレンダリング時間がかなり長くなることがあります。その場合、パフォーマンスを向上させるために以下の対策を行うことができます。

データの間引き

データを間引き(decimation)すると、最良の結果が得られるでしょう。グラフに表示するデータが多い場合は、数百ピクセル幅のグラフ上に数万点のデータポイントを表示することは意味がありません。

データの間引きには多くの方法があり、どのアルゴリズムの選べばよいかは、データと達成したい結果に依存します。たとえば、最小/最大間引きは元データのピーク値を保持しますが、ピクセルごとに最大4点を必要とすることがあります。このタイプの間引きは、データピークを表示する必要がある非常にノイズの多い信号に対してうまく機能します。

ベジェ曲線を無効にする

チャート上に線を描画する場合は、ベジェ曲線を無効にするとレンダリング時間が短縮されます。これは、直線を描く方がベジェ曲線を描くよりもパフォーマンスに優れているためです。

チャート全体のベジェ曲線を無効にするには次のようにします。

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

線描画を無効にする

データ点が多い場合は、データセットの線の描画を無効にし、点のみを描画するのがよりパフォーマンスに優れます。これは、キャンバスに描画するものが少なくなることを意味し、レンダリングのパフォーマンスを向上させます。

線の描画を無効にするには次のようにします。

new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            showLine: false, // 1つのデータセットで無効にします。
        }]
    },
    options: {
        showLines: false, // 全てのデータセットで無効にします。
    }
});

アニメーションを無効にする

グラフのレンダリング時間が長い場合は、アニメーションを無効にすることをお勧めします。これを行うと、更新時にグラフを何回もレンダリングする代わりに1回だけレンダリングするだけで済むことになります。これは、CPU使用率を減らし、一般的なページパフォーマンスを向上させる効果があります。

アニメーションを無効にするには次のようにします。

new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        animation: {
            duration: 0, // 一般的なアニメーションの時間
        },
        hover: {
            animationDuration: 0, // アイテムのマウスオーバー時のアニメーションの長さ
        },
        responsiveAnimationDuration: 0, // サイズ変更後のアニメーションの長さ
    }
});