Chart.jsのプラグイン設定を更新する処理を、簡潔に記述したい

Question

やりたいこと

画面に入力された年を基点にして、canvasの背景を塗りつぶしたいです。ひとまず実装はできて、次のような動きが実現できました。

質問

実装はできたものの、Chart.jsのプラグインの扱いに慣れておらず、チャートの更新処理が冗長になっているように感じます。具体的には、beforeDraw の関数を再度書くのではなく、塗りつぶし開始位置だけ更新したいと思っています。

以下のコードについて改善できる点がありましたら、ご指摘いただけると助かります。

HTMLのbody部分

  <p>
    塗りつぶし開始年度：
    <input id="start" type="number" name="start" value="1983" />
  </p>
  <div class="canvas-wrapper">
    <canvas id="chart"></canvas>
  </div>

javaScript（jQuery）

$(function(){
  /**
   * グラフ描画（初期処理）
   */
  var ctx = $('#chart')[0].getContext('2d');
  var chart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: [1983, 1984, 1985, 1986, 1987, 1988, 1989, 1990, 1991, 1992],
      datasets: [{
        data: [10, 0, 30, 92, 50, 60, 70, 80, 10, 30],
      }],
    },
    plugins: [{
      beforeDraw: function(chart, options) {
        // 範囲を設定
        var xscale = chart.scales["x-axis-0"];
        var yscale = chart.scales["y-axis-0"];
        var left = xscale.getPixelForValue(1983);  // 塗りつぶしを開始するラベル位置
        var right = xscale.getPixelForValue(1988); // 塗りつぶしを終了するラベル位置
        var top = yscale.top;                      // 塗りつぶしの基点（上端）
        
        // 塗りつぶす長方形の設定
        ctx.fillStyle = "rgba(0, 0, 255, 0.2)";
        ctx.fillRect(left, top, right - left, yscale.height);
      }
    }],
  });
  
  /**
   * 塗りつぶし開始年が変更されたときの処理
   */
  $('#start').change(function(){
    // 変更された値を取得
    var from_year = Number($(this).val());
    
    // チャートのプラグインの設定を変更（ここが冗長だと感じます）
    chart.config.plugins[0].beforeDraw = function(chart, options) {
      // 範囲を設定
      var xscale = chart.scales["x-axis-0"];
      var yscale = chart.scales["y-axis-0"];
      var left = xscale.getPixelForValue(from_year);      // (※)開始年を変更
      var right = xscale.getPixelForValue(from_year + 5); // (※)終了年を変更
      var top = yscale.top;

      // 塗りつぶす長方形の設定
      ctx.fillStyle = "rgba(0, 0, 255, 0.2)";
      ctx.fillRect(left, top, right - left, yscale.height);
    };
    // チャートを更新
    chart.update();
  });
});

使用したライブラリ

• jQuery 3.4.1
• Chart.js 2.9.3

関連情報

Chart.js プラグイン
Chart.js チャートの更新

Answer 1

こんにちは、AkihiroIshiiさん

beforeDrawに渡す関数の中で、初期化と更新で異なる変数を利用している部分があったため、
必要な変数を引数で渡し、その変数を確保した状態の関数を返すことで、再利用できるようにしました。

function handleBeforeDraw(startYear, ctx) {
  return function(chart, options) {
    // 範囲を設定
    var xscale = chart.scales["x-axis-0"];
    var yscale = chart.scales["y-axis-0"];
    var left = xscale.getPixelForValue(startYear);  // 塗りつぶしを開始するラベル位置
    var right = xscale.getPixelForValue(startYear + 5); // 塗りつぶしを終了するラベル位置
    var top = yscale.top;                      // 塗りつぶしの基点（上端）

    // 塗りつぶす長方形の設定
    ctx.fillStyle = "rgba(0, 0, 255, 0.2)";
    ctx.fillRect(left, top, right - left, yscale.height);
  }
}

$(function(){
  /**
   * グラフ描画（初期処理）
   */
  var ctx = $('#chart')[0].getContext('2d');
  var chart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: [1983, 1984, 1985, 1986, 1987, 1988, 1989, 1990, 1991, 1992],
      datasets: [{
        data: [10, 0, 30, 92, 50, 60, 70, 80, 10, 30],
      }],
    },
    plugins: [{
      beforeDraw: handleBeforeDraw(1983, ctx),
    }],
  });

  /**
   * 塗りつぶし開始年が変更されたときの処理
   */
  $('#start').change(function(){
    // 変更された値を取得
    var from_year = Number($(this).val());

    // チャートのプラグインの設定を変更（ここが冗長だと感じます）
    chart.config.plugins[0].beforeDraw = handleBeforeDraw(from_year, ctx);
    // チャートを更新
    chart.update();
  });
});

ちなみにこのような手法を クロージャ と呼んだりします。
分かりづらい概念だったりしますので、今回指名した上記の内容や、以下リンクの makeAdder などをご覧いただければ、比較的つかみやすいかと思います。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Closures

以上、参考になれば、幸いです。

Comments

[AkihiroIshii]

まさに望んでいた形です！ありがとうございます！
なるほど、関数が返り値になるように定義するんですね。クロージャの参考資料もご紹介いただき助かります。勉強させていただきます。