JavaScriptのChart.js - 任意の垂直線の描画方法

Chart.jsは、JavaScriptでグラフを描画するための人気のあるライブラリです。任意の垂直線をグラフに描画する方法について説明します。以下にいくつかの方法を示します。

方法1: Chart.jsのAnnotation Pluginを使用する方法 Chart.jsには、Annotation Pluginと呼ばれる便利なプラグインがあります。これを使用すると、グラフに注釈や線を追加できます。垂直線を追加するには、以下のようなコードを使用します。

// Chart.jsのオプションでAnnotation Pluginを有効にする
options: {
  plugins: {
    annotation: {
      annotations: [{
        type: 'line',
        mode: 'vertical',
        scaleID: 'x-axis-0',
        value: '2024-01-30', // 垂直線の位置
        borderColor: 'red',
        borderWidth: 2
      }]
    }
  }
}

上記の例では、annotationsプロパティに垂直線の設定を追加しています。typeをline、modeをverticalに設定し、scaleIDをグラフのx軸のIDに設定します。valueには垂直線の位置を指定します。borderColorとborderWidthは線の色と太さを指定するためのオプションです。この例では赤色の線が追加されます。

方法2: カスタムプラグインを作成する方法 Chart.jsには、独自のプラグインを作成することもできます。これにより、自分自身の要件に合わせたカスタム機能を追加できます。以下は、垂直線を描画するためのカスタムプラグインの例です。

// Chart.jsのプラグインを作成する
Chart.plugins.register({
  afterDraw: function(chart, easing) {
    var ctx = chart.ctx;
    var x = chart.scales['x-axis-0'].getPixelForValue('2024-01-30'); // 垂直線の位置
    var topY = chart.chartArea.top;
    var bottomY = chart.chartArea.bottom;
    // 垂直線を描画する
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(x, topY);
    ctx.lineTo(x, bottomY);
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'red';
    ctx.stroke();
    ctx.restore();
  }
});

上記の例では、afterDrawメソッドを使用して、グラフが描画された後にカスタムコードを実行しています。getPixelForValueメソッドを使用して、日付（'2024-01-30'）をピクセルの位置に変換しています。そして、moveToとlineToメソッドを使用して垂直線を描画しています。

これらはChart.jsで任意の垂直線を描画するための2つの方法です。必要に応じて、他のオプションやカスタマイズも可能です。