Bootstrap:多機能なグラフ描写が可能な『ECharts』の取扱いを調べた

Bootstrap:多機能なグラフ描写が可能な『ECharts』の取扱いを調べた

Bootstrap:多機能なグラフ描写が可能な『ECHARTS』の取扱いを調べた

Gentelellaのデモページはココ

『Gentelella』に使われているプラグインにEchartsというモノがありました。これが超多機能

  1. ボタンによるグラフスタイルの変更 が出来る(棒グラフから線グラフ等)
  2. 描写しているグラフを画像でダウンロードできる
  3. 分散図や円グラフも搭載している

調べる事が多そうなので、今回はこの中の【echart Line】をPickUpします。

Gentelellaテンプレートの該当箇所を確認

フォルダ構成内でECHARTSの記載がある箇所は太字の3か所でした。

├── project/
│  ├── project/
│  │  ├─── settings.py
│  │  (以下略)
│  ├── app_01/
│  │  ├─── templates/
│  │  │ ├─── echarts.html
│  │  │ (以下略)
│  (以下略)
├── static/
│  ├── build/
│  │  ├─── css/
│  │  ├─── js/
│  │  │ ├─── custom.js
│  │  │ ├─── custom.min.js
│  │  (以下略)
│  ├── venders/
│  │  ├─── echarts/
│  │  │  ├─── dist/
│  │  │  │ ├─── echarts.min.js
│  │  │  │ ├─── echarts.js
│  │  (以下略)
│  │  │  ├─── map/
│  │  │  │ ├─── js/
│  │  │  │ │ ├─── world.js
│  │  │  │ │ ├─── china.js
│  │  │ (以下略)
(以下略)

この中のworlds.jsについては世界地図の描写になっているので今回の調査対象外とします。

custom.jsのechart Line関連個所

//echart Line 以下の場所が今回の描写に利用している箇所です。
例のごとく値が入ったサンプルが存在しています。

25行目~29行目:グラフのラベル設定

25~29行目は下の赤丸部分の設定を行っています。

縦位置と横位置そしてラベル名。わかり易い構成です。

こんな実験してみました。『値は無いけど項目だけ勝手に足してみた』

これでもグラフとして現れるラベルは3つ [ Intent / Pre-order / Deal ]だけでした。
理由は62行目~98行目の各データの中で【name:’Deal’】などとして値としっかり紐づけているからです。
逆を言えば、値ゼロのリストもしっかり作ってあげないとグラフのラベルに描写されないと言う事になります。

62行目~98行目:プロットするデータと初期値


サンプルではすべての初期値が【line】になっていますが、例えば76行目を【bar】にすると上のようなグラフが作れます。※右上のグラフの姿を変えるボタンを押すと全体がLineやbarに変わります。

用意する値は単純な1次元配列ですが、共通の横軸を用意する必要があります。
(値ゼロでもカラムを用意しなくてはいけない)

ちなみに値の無い時の扱いとして次のような実験をしてみました。

  1. nullを記入:エラー ※NULLでも同じ
  2. 空白【 , , 】:グラフが途切れる
  3. 0:値=0 としてプロット
  4. ” (シングル):グラフが途切れる ※2と同じ
  5. “”(ダブル):グラフが途切れる ※2と同じ

要素の数が可変する場合の処理をどうするか

記載する内容(変動させる内容)を要素ごとにまとめて【<script>var hoge = hoga</script>】でJavaScriptに配列を送って JS内で【forループ】が最適解かもと思っています。

今回作成しているECモールの自店舗データの分析とかであれば要素の個数がほぼ固定なので、こう言った場合は事前準備でもいいかもしれません。存在しなければグラフに表示されないわけですから。

まとめ

ECHARTS公式

ECHARTSだけで色んなグラフを作れるので結構楽しそうです。

キーワードなどは分布図を利用すれば『来店キーワードとGoogle検索数との間での散らばり』が見えるでしょうし。
端末差異などは円グラフなんかでパッとわかるようになると思います。
特にキーワードの分散図なんかは下の2点をポイントとして対策まで落とし込めるかもしれません。

  1. 強力なライバルがいて商品が埋もれている
  2. 検索対象箇所にキーワードが含まれていない、または有効な書き方がされていない

グラフの力ってスゲーな。