JavaScript
Chart.jsでグラフの背景色を変えたいと思っています。 解説しているサイトを見つけて、書いてある通りにhtmlを作成したのですが動作しません。 どこが間違っているのか教えていただけませんか。 よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <title>折れ線グラフ</title> </head> <body> <h1>折れ線グラフ</h1> <div class="canvas-wrapper"> <canvas id="chart"></canvas> </div> <script type="text/javascript"> $(function(){ // canvasの背景を塗りつぶす設定（下部の★で参照する） function drawBackground(target) { // 範囲を設定 var xscale = target.scales["x-axis-0"]; var yscale = target.scales["y-axis-0"]; var left = xscale.getPixelForValue(1985); // 塗りつぶしを開始するラベル位置 var right = xscale.getPixelForValue(1990); // 塗りつぶしを終了するラベル位置 var top = yscale.top; // 塗りつぶしの基点（上端） // 塗りつぶす長方形の設定 ctx.fillStyle = "rgba(0, 0, 255, 0.2)"; ctx.fillRect(left, top, right - left, yscale.height); } // グラフ描画 var ctx = $('#chart')[0].getContext('2d'); var chart = new Chart(ctx, { type: 'line', data: { labels: [1983, 1984, 1985, 1986, 1987, 1989, 1990, 1991, 1992, 1993], datasets: [{ data: [10, 0, 30, 92, 50, 60, 70, 80, 10, 30], }], }, options: { animation: false, }, plugins: [{ beforeDraw: drawBackground // ★ }], }); }); </script> </body> </html>
