質問: "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 チャートの更新
回答: こんにちは、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 以上、参考になれば、幸いです。