Q&A
タイトルのとおりなのですが、chart.jsを用いて図形を描画したいのですが、
CSSによる図形の高さの制御がうまく行かず困っています。
このように記述すると、widthは指定通りになるのですが、
どうしてもheightの制御がうまく行かないです。
どのように指定すればheightの調整が出来るのでしょう？
canvas自体に制御を入れてみたりもしましたが、うまくいきませんでした。
html
1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <script src="https://cdn.jsdelivr.net/npm/chart.js@3.1.1/dist/chart.min.js"></script> 8 <title>Document</title> 9 <style> 10 .container { 11 border: solid; 12 height: 600px; 13 width: 600px; 14 } 15 16 .chart-container { 17 border: solid pink; 18 /* チャートの高さを伸ばして、枠線ピッタリにしたい */ 19 height: 500px; 20 width: 500px; 21 } 22 </style> 23 </head> 24 <body> 25 <div class="container"> 26 <div class="chart-container"> 27 <canvas id="my-chart"> Canvas not Supported/.... </canvas> 28 </div> 29 </div> 30 <script> 31 (function () { 32 "use strict"; 33 34 var type = "line"; // 折れ線グラフ 35 var data = { 36 labels: [0, 1, 2, 3], 37 datasets: [ 38 { 39 label: "AAAA", 40 data: [100, 200, 600, 350], // 実際のデータ 41 borderColor: "red", 42 lineTension: 0, 43 }, 44 { 45 label: "BBBB", 46 data: [-10, 500, 245, 360], 47 borderColor: "blue", 48 lineTension: 0, 49 }, 50 ], 51 }; 52 53 var ctx = document.getElementById("my-chart").getContext("2d"); 54 var myChart = new Chart(ctx, { 55 type: type, 56 data: data, 57 }); 58 })(); 59 </script> 60 </body> 61</html>
回答1件
0
ベストアンサー
こんな感じでどうでしょうか？
javascript
1var ctx = document.getElementById("my-chart").getContext("2d"); 2ctx.canvas.height = "100%"; // 追加
投稿2021/11/04 12:39
総合スコア4648
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/11/04 23:34