aki-tech-blogの技術ブログ

前ページ
次ページ

【chart.js】グラフの高さを固定する

今回はchart.jsで高さを固定する方法をご紹介

■ Chart.jsとは

JavaScriptのフレームワークです。

HTMLのcanvas上に、JavaScriptを用いて

折れ線グラフや円グラフ等を簡単に記述するものです。

基本的に横幅でheightのサイズが決まるので、

CSSから高さの指定が出来ない仕様となっています。(多分)

今回はその高さをJavaScript側から設定してしまう方法です

※今回はちょっとややこしい&ニッチな内容なので、

コードだけ置いておきます。

コメントで色々と解説しているので、

解読出来るかと思います👾

■ HTML

<!DOCTYPE html>

<head>

<style>

/* 外枠 */

.container {

border: solid;

height: 600px;

width: 600px;

}

/* canvasの親要素 */

.chart-container {

border: solid pink;

height: 500px;

width: 500px;

}

</style>

</head>

<body>

<canvas id="my-chart"> Canvas not Supported/.... </canvas>

</div>

(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って情報が若干少ないので参考になると思います。

現場からは以上です！

【Python】関数を使わず、文字列の任意の部分を取り出す【[index1: index2]】

Pythonの文字列の任意の部分を取り出す方法について解説です。

特に関数等は使わず、非破壊で取り出せるので、

非常に使いやすいかと思います。

■ 文字列の取り出し方

【構文】＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

文字列[index1: index2]

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

たったこれだけでindex1番目の文字〜index2番目の文字を

非破壊で取り出せます。

ちなみに重要なポイントですが、

index1番目の文字は、取り出しの対象

index2番目の文字は、取り出しの対象外です。

つまり、index1以上index2未満の文字列を取り出します。

【例文】＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

# 0 1 2 3 4 5 6 7 8 9

msg = "あいうえおかきくけこ"

msg2 = msg[1: 7]

print(msg2)

# 【出力結果】いうえおかき

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

このように、特に関数を使わず

文字列の取り出しが出来ました。

現場からは以上です！

【Python】for文の繰り返し回数を指定する【range】

Pythonのループ処理の繰り返し回数を
range関数を使って指定する方法を解説します。


■Pythonの場合、ループ処理は基本的にfor-inを使う

【構文】＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
for 変数 in 配列名:
    繰り返したい処理
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

■繰り返し回数を指定

【構文】＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
for 変数 in range(回数):
    繰り返したい処理
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

【例文】＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
for i in range(5):
    print(item)
#0
#1
#2
#3
#4
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

このように、jsのように回数を指定して
ループ処理を記述することができました。

テスト等でループ回数を指定したいシーンは
それなりにあると思うので、
覚えておくと便利だと思います！

現場からは以上です

【Python】for文でindexを取得する【enumerate】

Pythonのfor-in文でindexの取得方法について解説します

■for-in文とは
いわゆる繰り返し処理
Pythonの場合、基本的にfor-inを使う

【構文】＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
for 変数 in 配列名:
繰り返したい処理

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

■enumerateの使い方：タプル型で取得
Pythonの繰り返し文でindexを取得する方法は
いくつかありますが、
enumerate関数を使う方法が最も簡単です

【構文】＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
for 変数 in enumerate(配列名):
繰り返し処理
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

【例文】＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
fruits = ["りんご", "ぶどう", "いちご"]

for item in enumerate(fruits):
print(item)
#(0, 'りんご')
#(1, 'ぶどう')
#(2, 'いちご')
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

■enumerateの使い方：indexとデータを別々に取得

今回はindexとデータを別々に取得する方法です。
おそらくこちらのほうが使い勝手が良いと思います。

【構文】＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
for 変数1 ,変数2 in enumerate(配列名):
繰り返し処理
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
ちなみに、変数１にindexが入り
変数２にデータが入ります

【例文】＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
fruits = ["りんご", "ぶどう", "いちご"]

for index ,item in enumerate(fruits):
print(index)
print(item)
print() #改行用

#【出力結果】
#0
#りんご
#
#1
#ぶどう
#
#2
#いちご
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

このようにindexとデータを別々に取得することができました。

使用シーンは限定的な気がしますが、

ややこしい処理を書き足さずともindexが取得できるので

覚えておいて損はないと思います。

現場からは以上です！

【Python】繰り返し処理【for-in】

Pythonのfor-in文の使い方について解説します。


■for-in文とは

いわゆる繰り返し処理
Pythonの場合、基本的にfor-inを使います

【構文】＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
for 変数 in 配列名:
    繰り返したい処理
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿


このようにするだけで簡単に繰り返し処理が作られます


■ 実際にスクリプトを動かしてみましょう

【例文】＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
fruits = ["りんご", "ぶどう", "いちご"]

for item in fruits:
    print(item)
#【出力結果】
#りんご
#ぶどう
#いちご
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

このように、繰り返すことが可能です。



JavaScript等とは少し書き方が違うので注意が必要です。

現場からは以上です！

前ページ
次ページ