スタートページ>
JavaScript
本サイト索引 グラフ作成環境・関数
グラフの種類
- 離散型
いくつかの (x,y) の組を用いて棒グラフや折線グラフなどを作成するタイプのグラフです。
・散布図
・折線グラフ:積上げグラフ
・棒グラフ:並列グラフ、積上げグラフ、横棒グラフ
・複合グラフ
・円グラフ、ドーナツ図
など
- 関数型
y= f(x) のように、指定した関数のグラフを作成します。
・陽関数:y = f(x)
・媒介関数:x = f(t), y = g(t)
・極座標関数:r = f(t), x = r.cos(t), y = r.sin(t)
・陰関数:f(x,y) = 0
など
グラフ作成環境
本サイトでは、無料で、利用者のPCに特別のソフトウェアをダウンロードする必要もないものに限定しています。これらは、グラフ作成だけに特化したものではありませんが、ここではグラフ作成の部分に限定しています。
- ●JavaScript に組み込む関数ライブラリ
HTMLで script で記述しますので、Webページ内にグラフを表示できます。
- Chart.js :
https://misc.0o0o.org/chartjs-doc-ja/
ライブラリをダウンロードすることもできますが、HTMLのscript部に、次を挿入するだけで関数を利用できます。
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
離散型グラフ作成の代表的なライブラリです。簡単な作図から高度な体裁まで可能です。
- Google Chart Tools :
http://yohshiy.blog.fc2.com/blog-entry-195.html
HTMLのscript部に、次を挿入するだけで関数を利用できます。
<script src="https://www.gstatic.com/charts/loader.js"></script>
このライブラリはダウンロードできないので、利用するにはオンラインでこのサイトに接続されている必要があります。
離散型に利用できます。Chart.js と比較して機能が劣るようです。
- ●JavaScript 以外の言語
Python と R は、JavaScript とは無関係の言語です。そのためWebブラウザでの操作はできません。言語をダウンロードすることもできますが、Google Drive の Google Colaboratry でこれらの言語の利用環境を提供しているので、Googleアカウントを入手するだけで利用できます。
- Python :
https://www.python.jp/train/index.html
Python は、汎用の軽量言語ですが、特に統計やAIの分野で豊富な拡張モジュールが提供され、この分野の基本言語となっています。
グラフ描画には、 Matplotlib のコンポーネント matplotlib.pyplot(plt)を用います。
関数型グラフ作成機能もありますが、主に離散型グラフが充実しており、統計処理結果のグラフ化に利用されています。
軸目盛りはグラフの下と左に表示されます。0点に合わせるのは単純ではありません。グラフの下に値の表を表示できます。
なお、Matplotlib 自体はデータの加工機能はもっていませんので、NumPy の配列(np) や Pandas の DataFrame(df)を用います。このように。Python を利用するには、いろいろな拡張モジュールの知識が求められます。
- R :
https://www.python.jp/train/index.html
Python と同様な言語ですが、Python がアプリケーション作成を意図しているのに対して、Rはむしろ個人的な学習や研究に適しているようです。簡素な記述で作図し、それを見ながら体裁を整えるような操作に向いています。離散型・関数型に使えます。
軸目盛りはデフォルトではグラフの下と左に表示されますが0点に合わせるのは単純です。グラフの棒や点にマウスを重ねると値が表示されます。
- 私自作のライブラリ
- canvasxy :canvasxy 使用解説書 数式グラフ
HTML の canvas に、関数型グラフを作成するための部品をまとめたものです。素人の作品ですが、
<script src="https://www.kogures/hitoshi/javascript/canvasxy/canvasxy.js"></script>
でお使いできます。
本サイトでの参照先(離散型)
本サイトでの参照先(関数型)