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

2020.12.17
JavaScript備忘録
Bootstrap4, ECHARTS, JavaScript, スクリプト備忘録, テンプレート, ひとりごと, 可変できるグラフ, 情報収集

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

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

Gentelellaのデモページはココ

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

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

調べる事が多そうなので、今回はこの中の【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関連個所

/* ECHRTS */

function init_echarts() {

    if (typeof(echarts) === 'undefined') {
        return;
    }
    console.log('init_echarts');
(中略)

    //echart Line

    if ($('#echart_line').length) {

        var echartLine = echarts.init(document.getElementById('echart_line'), theme);

        echartLine.setOption({
            title: {
                text: 'Line Graph',
                subtext: 'Subtitle'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                x: 220,
                y: 40,
                data: ['Intent', 'Pre-order', 'Deal']
            },
            toolbox: {
                show: true,
                feature: {
                    magicType: {
                        show: true,
                        title: {
                            line: 'Line',
                            bar: 'Bar',
                            stack: 'Stack',
                            tiled: 'Tiled'
                        },
                        type: ['line', 'bar', 'stack', 'tiled']
                    },
                    restore: {
                        show: true,
                        title: "Restore"
                    },
                    saveAsImage: {
                        show: true,
                        title: "Save Image"
                    }
                }
            },
            calculable: true,
            xAxis: [{
                type: 'category',
                boundaryGap: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            }],
            yAxis: [{
                type: 'value'
            }],
            series: [{
                name: 'Deal',
                type: 'line',
                smooth: true,
                itemStyle: {
                    normal: {
                        areaStyle: {
                            type: 'default'
                        }
                    }
                },
                data: [10, 12, 21, 54, 260, 830, 710]
            }, {
                name: 'Pre-order',
                type: 'line',
                smooth: true,
                itemStyle: {
                    normal: {
                        areaStyle: {
                            type: 'default'
                        }
                    }
                },
                data: [30, 182, 434, 791, 390, 30, 10]
            }, {
                name: 'Intent',
                type: 'line',
                smooth: true,
                itemStyle: {
                    normal: {
                        areaStyle: {
                            type: 'default'
                        }
                    }
                },
                data: [1320, 1132, 601, 234, 120, 90, 20]
            }]
        });

    }
　(中略)
}
(中略)
$(document).ready(function() {
    init_echarts();
}

100

101

102

103

104

105

106

107

/* ECHRTS */

function init_echarts() {

if (typeof(echarts) === 'undefined') {

return;

}

console.log('init_echarts');

(中略)

//echart Line

if ($('#echart_line').length) {

var echartLine = echarts.init(document.getElementById('echart_line'), theme);

echartLine.setOption({

title: {

text: 'Line Graph',

subtext: 'Subtitle'

tooltip: {

trigger: 'axis'

legend: {

x: 220,

y: 40,

data: ['Intent', 'Pre-order', 'Deal']

toolbox: {

show: true,

feature: {

magicType: {

show: true,

title: {

line: 'Line',

bar: 'Bar',

stack: 'Stack',

tiled: 'Tiled'

type: ['line', 'bar', 'stack', 'tiled']

restore: {

show: true,

title: "Restore"

saveAsImage: {

show: true,

title: "Save Image"

}

calculable: true,

xAxis: [{

type: 'category',

boundaryGap: false,

data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

}],

yAxis: [{

type: 'value'

}],

series: [{

type: 'line',

smooth: true,

itemStyle: {

normal: {

areaStyle: {

type: 'default'

}

data: [10, 12, 21, 54, 260, 830, 710]

}, {

type: 'line',

smooth: true,

itemStyle: {

normal: {

areaStyle: {

type: 'default'

}

data: [30, 182, 434, 791, 390, 30, 10]

}, {

type: 'line',

smooth: true,

itemStyle: {

normal: {

areaStyle: {

type: 'default'

}

data: [1320, 1132, 601, 234, 120, 90, 20]

}]

});

}

　(中略)

}

(中略)

$(document).ready(function() {

init_echarts();

}

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

25行目～29行目：グラフのラベル設定

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

legend: {
                x: 220,
                y: 40,
                data: ['Intent', 'Pre-order', 'Deal']
            },

legend: {

x: 220,

y: 40,

data: ['Intent', 'Pre-order', 'Deal']

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

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

data: ['Intent', 'Pre-order', 'Pre-order2', 'Deal', 'Deal2']

1	data: ['Intent', 'Pre-order', 'Pre-order2', 'Deal', 'Deal2']

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

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

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

#プロットする値 ※73行目、 85行目、 97行目
data: [10, 12, 21, 54, 260, 830, 710]

1 2	#プロットする値 ※73行目、 85行目、 97行目 data: [10, 12, 21, 54, 260, 830, 710]

#横軸 ※57行目
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

1 2	#横軸 ※57行目 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

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

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

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

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

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

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

まとめ

ECHARTS公式

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

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

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

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

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

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

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

custom.jsのechart Line関連個所

25行目～29行目：グラフのラベル設定

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

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

まとめ

関連

Django：Views.pyでmodels.modelを使い日付毎の集計を行う方法 2020.12.16

Django：グラフ描写ツール Echartsで要素数が変動するグラフを描く方法 2020.12.18

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

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

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

custom.jsのechart Line関連個所

25行目～29行目：グラフのラベル設定

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

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

まとめ

共有:

関連

Django：Views.pyでmodels.modelを使い日付毎の集計を行う方法 2020.12.16

Django：グラフ描写ツール Echartsで要素数が変動するグラフを描く方法 2020.12.18