線グラフ

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

使用例

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

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

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

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

(訳注: sandbox)

名前 説明
label String 凡例とツールチップに表示されるデータセットのラベル。
xAxisID String このデータセットをプロットするx軸のID。指定されていない場合、これは最初に見つかったx軸のIDになります。
yAxisID String このデータセットをプロットするy軸のID。指定しない場合、これは最初に見つかったy軸のIDになります。
backgroundColor Color 線の下の塗りつぶしの色。 を参照してください。
borderColor Color 線の色。を参照してください。
borderWidth Number 線の幅(ピクセル単位)。
borderDash Number[] ダッシュの長さと間隔。MDNを参照してください。(訳注: 線と空白のピクセル長を配列で指定。例えば、[5, 10, 15, 20]では、[実5 - 空10 - 実15 - 空20px]の繰り返しの破線。[5]では、[実5 - 空5 - ...]。)
borderDashOffset Number ダッシュのオフセット。MDNを参照してください。
borderCapStyle String 線のキャップスタイル(端の形状)。MDNを参照してください。(訳注: 'butt', 'round', or 'square')
borderJoinStyle String 線の結合スタイル。MDNを参照してください。(訳注: 'bevel', 'round', or 'miter')
cubicInterpolationMode String 離散データ点を滑らかな曲線へ補間するために使用されるアルゴリズム。詳細...
fill Boolean/String 線の下の領域を埋める方法。面グラフを参照してください。
lineTension Number 線のベジェ曲線の張力。直線を描くには0に設定します。'monotone'キュービック補間が使用されている場合、このオプションは無視されます。
pointBackgroundColor Color/Color[] 点の塗りつぶしの色。
pointBorderColor Color/Color[] 点の境界線の色。
pointBorderWidth Number/Number[] 点の境界線の幅(ピクセル単位)。
pointRadius Number/Number[] 点の形状の半径。0に設定すると、点はレンダリングされません。
pointStyle String/String[]/Image/Image[] 点のスタイル。詳細...
pointHitRadius Number/Number[] マウスオーバー検出のために点半径に追加される半径(ピクセル単位)。
pointHoverBackgroundColor Color/Color[] マウスオーバー時の点の背景色。
pointHoverBorderColor Color/Color[] マウスオーバー時の点の境界線の色。
pointHoverBorderWidth Number/Number[] マウスオーバー時の点の境界線の太さ。
pointHoverRadius Number/Number[] マウスオーバー時の点の半径。
showLine Boolean falseの場合、このデータセットの線は描画されません。
spanGaps Boolean trueの場合、データがない点またはヌルの点との間に線が描画されます。falseの場合、NaNデータ点では線が途切れます。
steppedLine Boolean/String 階段グラフとして表示します。詳細...

キュービック補間モード

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

  • '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とマージされ、チャートに渡されます。

名前 初期値 説明
showLine Boolean true falseの場合、点間の線は描画されません。
spanGaps Boolean false falseの場合、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
    }]

こちらの選択肢は、散布図などの疎データセットに使用されます。各データポイントは、'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, // サイズ変更後のアニメーションの長さ
    }
});

results matching ""

    No results matching ""