今回はchart.jsで高さを固定する方法をご紹介
■ Chart.jsとは
JavaScriptのフレームワークです。
HTMLのcanvas上に、JavaScriptを用いて
折れ線グラフや円グラフ等を簡単に記述するものです。
基本的に横幅でheightのサイズが決まるので、
CSSから高さの指定が出来ない仕様となっています。(多分)
今回はその高さをJavaScript側から設定してしまう方法です
※今回はちょっとややこしい&ニッチな内容なので、
コードだけ置いておきます。
コメントで色々と解説しているので、
解読出来るかと思います👾
■ HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- chart.jsの読み込み -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.1.1/dist/chart.min.js"></script>
<style>
/* 外枠 */
.container {
border: solid;
height: 600px;
width: 600px;
}
/* canvasの親要素 */
.chart-container {
border: solid pink;
height: 500px;
width: 500px;
}
</style>
</head>
<body>
<!-- あくまで外枠なので、影響なし -->
<div class="container">
<!-- canvasの親要素 今回は、このサイズに合わせてグラフを描画 -->
<div class="chart-container">
<!-- ここのcanvasに描画される -->
<canvas id="my-chart"> Canvas not Supported/.... </canvas>
</div>
</div>
<script>
(function () {
"use strict";
/* グラフの設定 */
var type = "line"; // 折れ線グラフ
var data = {
labels: [0, 1, 2, 3], // 横軸の値
datasets: [
// 赤色の折れ線
{
label: "AAAA", // ラベル名
data: [100, 200, 600, 350], // 実際のデータ
borderColor: "red", // 折れ線の色
lineTension: 0, // 折れ線のテンション
},
// 青色の折れ線
{
label: "BBBB", // ラベル名
data: [-10, 500, 245, 360], // 実際のデータ
borderColor: "blue", // 折れ線の色
lineTension: 0, // 折れ線のテンション
},
],
};
const option = {
// 以下の2つはレスポンシブにグラフを描画するために必要(らしい)
responsive: true,
maintainAspectRatio: false,
};
// HTMLのcanvas要素とリンクさせる。"2d"は二次元の意。
const ctx = document.getElementById("my-chart").getContext("2d");
/* 今回のポイント */
// canvasの高さを親要素の100%に設定する
// CSSでなく、ここで設定しなければ反映されない
ctx.canvas.height = "100%";
/* グラフの描画 */
const myChart = new Chart(ctx, {
type: type,
data: data,
option: option,
});
})();
</script>
</body>
</html>
このよう親要素であるピンクの枠線ぴったりに
高さが設定されました。
Chart.jsって情報が若干少ないので参考になると思います。
現場からは以上です！