学校に通わずに学ぶログ

投稿

9月, 2021の投稿を表示しています

ブログの説明

学校に通わないで学んだことを記しています。間違っているところが何かありましたらご指摘下さると幸いです。コメントに対する返信が遅れる可能性があります。その場合は申し訳ございません。

このブログでは広告を表示しています。このブログ内の投稿記事を検索するには右上の拡大鏡のアイコンを、アーカイブやラベル付けから投稿記事を閲覧するには左上の三重線のアイコンをクリックして下さい。

数式の表示にはMathJaxを利用させていただいています。数式の表示のためにJavaScriptが有効である必要があります。そうでない場合、訳の分からないLaTeXのコードが表示されます。幾何学図形やチャートの表示にはHTML5 CanvasやGoogle Chartを使用しています。その表示のためにもJavaScriptが有効である必要があります。

Google Chartsを利用してHPやブログにチャート（グラフ等）を描く方法

9月 21, 2021

ブログなどのウェブ・ページに自分の意見や主張や考えを掲載するときにそれを裏付けるデータがあると説得力が増すかもしれない。そのデータをチャートとして描いて視覚化できれば尚更。その場合、一般的なのはそれを専門にしている表計算アプリを使うこと。表計算ソフトウェアにはデータを各種チャートの形にして視覚化してくれる機能が大抵備わっている。LibreOfficeのCalcの場合、そのチャートをコピーしてInkscape上に貼り付けることができる。それをPNG形式の画像やSVG形式の画像として保存し、それをウェブ・ページに掲載する方法がある。他の選択肢としては、HTML5 CanvasやJavaScriptのライブラリを使う手がある。データを視覚化してくれるJavaScriptのライブラリが最近では数え切れないくらい多くある。今回はGoogle Chartsのライブラリを利用させていただいた。その手順についてこの投稿に書き留める。 2種類のチャートの完成図同じデータ・セットで2種類のチャートを作ってみた。その完成図が次のとおり。 Google Chartsが有効ではありません。このページを再読み込みをすると有効になることがあります。 1つ目のチャートは日本のマクロ経済のインフレ率の時系列データを折線グラフにしたもの。 2つ目のチャートは同じ時系列データを縦の棒グラフにしたもの。棒グラフだと0に近い値が見えなくなってしまっているためか、そこにマウスのポインタを合わせても値を表示してくれるイベント処理が機能しない。 Google Chartsが有効ではありません。このページを再読み込みすると有効になることがあります。これらのチャートを描くためのコードをHTMLから順に説明する。 HTMLのコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Google Chartでチャートを描いてみた</title>  <script src="https://www.gstatic.co...

LibreOfficeで列と行を置き換える（転置）

9月 20, 2021

使用したLibreOfficeのバージョンは6.1。現時点の最新版が7.2なので少し古い。列方向に並んでいる値を行方向に並ぶように置き換えたい。行方向に並んでいる値を列方向に並ぶように置き換えたい。この投稿では、いわゆる「行列の転置」をLibreOffice Calcで行う2つの方法について書き留めておく。例えば次のように値がセルに入力されているとする。 A B C D E 1 a b c d 2 1 2 3 4 3 4 5 これを次のようにしたい。 A B C D E 1 a 1 2 b 2 3 c 3 4 d 4 5 1つめの方法まず、変換したい値全体を選んでアクティブセルにする。そしてトップメニューの「編集」などから「切り取り」または「コピー」を選ぶ。 A B C D E 1 a b c d 2 1 2 3 4 3 4 5 転置後の値が入るセルの範囲の一番左上端になるセルを選んでアクティブにする。 A B C D E 1 2 3 4 5 トップメニューの「編集」などから「形式を選択して貼り付け」を選ぶ。このバージョン(6.1.5.2)のLibreOffice Calcではこの操作でLibreOffice Calc自体が固まってしまう現象が環境によっては起こるので要注意。「形式を選択して貼り付け」というダイアログボックスが開くのでその中の「行と列を入れ替える」というボタンを押す。 A B C D E 1 a 1 2 b 2 3 c 3 4 d 4 5 2つめの方法 2つめの方法はLibreOffice Calcに組み込まれている函数を使うこと。LibreOffice CalcにもMS Excel同...

HTML5 CanvasとJavaScriptで折線グラフを描いてみた

9月 15, 2021

使用した環境は次のとおり。 Chromium Version 90.0 Firefox Browser 78.13.0esr ECMAScript 6 (2015)以降 ECMAScriptはJavaScriptの標準規格。そのバージョンの6以降または2015以降では変数の宣言にletというキーワードが導入された。定数の宣言にはconstというキーワードが導入された。ただしletは予約語ではない。この投稿で掲載するJavaScriptのコードではletとconstを用いた。 JavaScriptにおける変数の詳細についてはまた別の機会に。 HTML5 Canvasで描いた折線グラフ日本のマクロ経済データの1つであるインフレ率を1960年から2020年まで時系列に折線グラフにしたものが次の図。このブラウザはHTML5 CanvasかJavaScriptをサポートしていません。スクリプト言語JavaScriptとHTML5 Canvasの2次元用レンダリングのAPIを利用して今回はこの折線グラフを描いてみた。 HTML HTML5 Canvasを表示するために用意しておくHTML文書の基本的内容は次のとおり。 <!DOCTYPE html> <html> <head> <title>日本のインフレ率の折線グラフ</title> </head> <body>  <canvas id="JapanInflationRateTimeSeries" width="700" height="400"> このブラウザはHTML5 CanvasかJavaScriptをサポートしていません。 </canvas> </body> <script>  </script> </html> ウェブ・ブラウザによってscript要素が最後に読み込まれることを期待してscript要素をbody要素の...