前回はトグルボタンでスマホ時のデータ一覧の表示方法を切り替える機能を実装しました。
今回は月ごとのデータをグラフ化する機能を実装します。
完成図は以下の通りです。
月別データのグラフ化
・月選択と合計金額出力部分の実装
・タブメニューと表示要素の連携
・グラフ出力
・グラフの隣に表を表示する
・データがないときの処理
・スマホ時のグラフレイアウト
以上の6ステップで進めていきます。
月選択と合計金額出力部分の実装
月選択と合計金額出力の実装の前に、レポート部分を入れるsectionタグを、データ一覧を囲っている<section>〜</section>の下に追記します。
<!-- スマホ表示用データ一覧 -->
</section>
<!--ここから追記 1067行目付近-->
<section class="p-section p-section__report">
<h3 class="pc_only">収支レポート</h3>
</section>
<!--ここまで-->
<!-- スマホ用切り替えタブ -->月選択と合計金額出力はカレンダーの同箇所と同処理なので、まずはカレンダー要素の中にある以下をコピーして<h3>の下にペーストします。
<?php
$base_date = strtotime($ym); //パラメータもしくは現在の年月のタイムスタンプ
$prev = date('Y-m', strtotime('-1 month', $base_date)); //前月取得
$next = date('Y-m', strtotime('+1 month', $base_date)); //次月取得
$calendar_title = date('Y-m', $base_date); //カレンダータイトル
$max_view = 10;
if (!isset($_GET['page_id'])) :
$page_id = 1;
$page_param = $page_id - 1;
$calendar_link_prev = '?ym=' . $prev;
$calendar_link_next = '?ym=' . $next;
$calendar_link_now = '?ym=' . date('Y-m');
else :
$page_id = $_GET['page_id'];
$page_param = ($page_id - 1) * $max_view;
$calendar_link_prev = '?ym=' . $prev . '&page_id=' . $page_id;
$calendar_link_next = '?ym=' . $next . '&page_id=' . $page_id;
$calendar_link_now = '?ym=' . date('Y-m') . '&page_id=' . $page_id;
endif;
?>
<div class="p-monthsearch">
<a href="<?php echo $calendar_link_prev; ?>">＜</a>
<input type="month" id="calendarMonth" value="<?php echo $calendar_title; ?>" onchange="onChangeMonth('ym', 'calendarMonth');">
<a href="<?php echo $calendar_link_next; ?>">＞</a>
<a href="<?php echo $calendar_link_now; ?>">今月</a>
</div>
<div class="p-calendar__sum">
<?php
$sql = 'SELECT (SELECT SUM(amount) FROM records WHERE type=0 AND date LIKE ? AND user_id=?)AS spending_sum, (SELECT SUM(amount) FROM records WHERE type=1 AND date LIKE ? AND user_id=?)AS income_sum FROM records WHERE user_id=? LIMIT 1';
$stmt = $db->prepare($sql);
$ym_param = $ym . '%';
$stmt->bind_param('sisii', $ym_param, $user_id, $ym_param, $user_id, $user_id);
sql_check($stmt, $db);
$stmt->bind_result($month_spending_sum, $month_income_sum);
$stmt->fetch();
?>
<p>
支出合計<span class="pc_only">：</span><br class="sp_only">
<span class="text-red">-¥<?php echo number_format($month_spending_sum); ?></span>
</p>
<p>
収入合計<span class="pc_only">：</span><br class="sp_only">
<span class="text-blue">¥<?php echo number_format($month_income_sum); ?></span>
</p>
<p>
<?php
$month_sum = $month_income_sum - $month_spending_sum;
$abs_month_sum = abs($month_sum);
if ($month_sum < 0) {
$sign = '-';
$class = 'text-red';
} else {
$sign = '';
$class = 'text-blue';
}
?>
収支合計<span class="pc_only">：</span><br class="sp_only">
<span class="<?php echo $class; ?>">
<?php echo $sign . '¥' . number_format($abs_month_sum); ?>
</span>
</p>
<?php $stmt->close(); ?>
</div>このままではパラメータや変数などが正しくないので修正します。
・<div class=”p-monthsearch”>にcenterクラスを付与
・<div class=”p-calendar__sum”>にcenterクラスを付与
・ym部分をgraph_monthに修正
・$ym_paramを$graph_month_paramに修正
・$calendar_link_prevを$graph_link_prevに修正
・$calendar_link_nextを$graph_link_nextに修正
・$calendar_link_nowを$graph_link_nowに修正
・上記3つの変数の最後にアンカーリンク「#report」を追加（6箇所）
・$page_param = ・・・を削除
・$calendar_title = ・・・を削除
・$max_view = 10を削除
・日付選択inputのid属性、value属性、onclick属性の関数引数を修正(以下参照)
<input type="month" id="graphMonth" value="<?php echo $graph_month; ?>" onchange="onChangeMonth('graph_month', 'graphMonth');"><?php
$base_date = strtotime($graph_month); //パラメータもしくは現在の年月のタイムスタンプ
$prev = date('Y-m', strtotime('-1 month', $base_date)); //前月取得
$next = date('Y-m', strtotime('+1 month', $base_date)); //次月取得
if (!isset($_GET['page_id'])) :
$page_id = 1;
$graph_link_prev = '?graph_month=' . $prev . '#report';
$graph_link_next = '?graph_month=' . $next . '#report';
$graph_link_now = '?graph_month=' . date('Y-m') . '#report';
else :
$page_id = $_GET['page_id'];
$graph_link_prev = '?graph_month=' . $prev . '&page_id=' . $page_id . '#report';
$graph_link_next = '?graph_month=' . $next . '&page_id=' . $page_id . '#report';
$graph_link_now = '?graph_month=' . date('Y-m') . '&page_id=' . $page_id . '#report';
endif;
?>
<div class="p-monthsearch center">
<a href="<?php echo $graph_link_prev; ?>">＜</a>
<input type="month" id="graphMonth" value="<?php echo $graph_month; ?>" onchange="onChangeMonth('graph_month', 'graphMonth');">
<a href="<?php echo $graph_link_next; ?>">＞</a>
<a href="<?php echo $graph_link_now; ?>">今月</a>
</div>
<div class="p-calendar__sum center">
<?php
$sql = 'SELECT (SELECT SUM(amount) FROM records WHERE type=0 AND date LIKE ? AND user_id=?)AS spending_sum, (SELECT SUM(amount) FROM records WHERE type=1 AND date LIKE ? AND user_id=?)AS income_sum FROM records WHERE user_id=? LIMIT 1';
$stmt = $db->prepare($sql);
$graph_month_param = $graph_month . '%';
$stmt->bind_param('sisii', $graph_month_param, $user_id, $graph_month_param, $user_id, $user_id);
sql_check($stmt, $db);
$stmt->bind_result($month_spending_sum, $month_income_sum);
$stmt->fetch();
?>
<p>
支出合計<span class="pc_only">：</span><br class="sp_only">
<span class="text-red">-¥<?php echo number_format($month_spending_sum); ?></span>
</p>
<p>
収入合計<span class="pc_only">：</span><br class="sp_only">
<span class="text-blue">¥<?php echo number_format($month_income_sum); ?></span>
</p>
<p>
<?php
$month_sum = $month_income_sum - $month_spending_sum;
$abs_month_sum = abs($month_sum);
if ($month_sum < 0) {
$sign = '-';
$class = 'text-red';
} else {
$sign = '';
$class = 'text-blue';
}
?>
収支合計<span class="pc_only">：</span><br class="sp_only">
<span class="<?php echo $class; ?>">
<?php echo $sign . '¥' . number_format($abs_month_sum); ?>
</span>
</p>
<?php $stmt->close(); ?>
</div>そしてパラメータの処理をファイル冒頭部分に追記します。
以前、カレンダーやデータの月検索パラメータの処理プログラムを記述したあたりに以下を追記します。
//グラフ月選択パラメータ処理
if (isset($_GET['graph_month'])) :
$graph_month = $_GET['graph_month'];
$_SESSION['graph_month'] = $graph_month;
else :
$graph_month = date('Y-m');
endif;
//グラフ月選択セッション処理
if (isset($_SESSION['graph_month'])) :
$graph_month = $_SESSION['graph_month'];
else :
$graph_month = date('Y-m');
endif;以上までを実装すると以下のように、月選択部分とその月の収入、支出別の合計金額が表示されます。
タブメニューと表示要素の連携
続いてグラフの表示を切り替えるタブメニューを実装します。
この機能は以前スマホのタブメニューで使用した処理とほぼ同じ処理を使います。
タブメニューとグラフ表示要素を、先ほど作成した月選択と合計金額出力要素の下に追記します。
<!-- グラフタブ -->
<ul class="p-graph-list" id="graphTab">
<li class="is-active" data-tab="graph-1">支出<br class="sp_only">カテゴリー</li>
<li data-tab="graph-2">収入<br class="sp_only">カテゴリー</li>
<li data-tab="graph-3">クレジット<br class="sp_only">カード</li>
<li data-tab="graph-4">スマホ<br class="sp_only">決済</li>
</ul>
<!-- グラフタブ -->
<!-- 支出カテゴリーグラフ -->
<div class="p-section__report__graph-box js-graph-content is-active" id="graph-1" data-tab="graph-1">
<p>支出カテゴリーグラフ</p>
</div>
<!-- 支出カテゴリーグラフ -->
<!-- 収入カテゴリーグラフ -->
<div class="p-section__report__graph-box js-graph-content" id="graph-2" data-tab="graph-2">
<p>収入カテゴリーグラフ</p>
</div>
<!-- 収入カテゴリーグラフ -->
<!-- クレジットグラフ -->
<div class="p-section__report__graph-box js-graph-content" id="graph-3" data-tab="graph3">
<p>クレジットグラフ</p>
</div>
<!-- クレジットグラフ -->
<!-- スマホ決済グラフ -->
<div class="p-section__report__graph-box js-graph-content" id="graph-4" data-tab="graph-4">
<p>スマホ決済グラフ</p>
</div>
<!-- スマホ決済グラフ -->CSSはすでに指定しているので割愛します。
上記を追記すると、タブメニューとその下に現在どのグラフを見ているかの要素が表示されます。
続いて、他のタブメニューをクリックしたらその要素に切り替わるようにします。
以下をindex.php内のJavaScriptを記述している部分に追記します。
//グラフタブ切り替え
$(function() {
// クッキー保存されている or いない場合
if ($.cookie('graphtab')) {
graphtab = $.cookie('graphtab');
} else {
graphtab = 0;
}
// タブ処理
tabSwitching(graphtab);
// クリックされた場合
$('#graphTab li').click(function() {
// クリックされた <li> のインデックス番号を取得
graphtab = $('#graphTab li').index(this);
// タブ処理
tabSwitching(graphtab);
// クッキーを保存
// 有効期限は1日(ブラウザを閉じたら初期化)
$.cookie('graphtab', graphtab, {
expires: 1
});
});
// タブ切り替え処理
function tabSwitching(graphtab) {
$('#graphTab li').removeClass('is-active');
$('#graphTab li').eq(graphtab).addClass('is-active');
$('.js-graph-content').removeClass('is-active');
$('.js-graph-content').eq(graphtab).addClass('is-active');
}
});セレクタやクラスの追加や削除部分のクラス名などが異なりますが、処理自体はスマホの画面下のタブメニューを実装したプログラムと同じです。
以上を追記するとタブメニューと下の要素が連動します。
グラフ出力
タブメニューができたので、実際に該当のグラフを出力します。
今回は「plotly.js」というプラグインを使用します。
まずCDNを読み込む記述を追加します。
<script src="https://cdn.plot.ly/plotly-2.16.1.min.js"></script>続いて支出カテゴリーの割合を出すためSQLでデータを抽出し、結果を配列に入れる処理を記述します。
以下を支出カテゴリーグラフ表示要素の中に追記します。
<?php
//配列の箱を用意
$amount_sum = array();
$item_list = array();
$sql = 'SELECT SUM(records.amount) as sum, spending_category.name
FROM records
//recordsテーブルとspending_categoryテーブルを結合して、idと一致させる
LEFT JOIN spending_category ON records.spending_category = spending_category.id
//↓type=0(支出データ)かつ、ユーザーID一致かつ、選択した月のデータという条件
WHERE records.type=0 AND records.user_id=? AND records.date LIKE ?
GROUP BY records.spending_category //支出カテゴリー名でグループ化
ORDER BY sum DESC'; //金額の多い順にソート
$stmt = $db->prepare($sql);
$stmt->bind_param('is', $user_id, $graph_month_param);
$stmt->execute();
$stmt->store_result();
$count = $stmt->num_rows();
$stmt->bind_result($amount, $item);
while ($stmt->fetch()) :
$amount_sum[] = $amount; //金額を配列に追加
if (is_null($item)) : //もしカテゴリーがNULLなら
$item_list[] = '不明'; //「不明」という文字列を変わりに配列に追加
else : //カテゴリーが入力されているときは
$item_list[] = $item; //そのカテゴリー名を配列に追加
endif;
endwhile;
?>画面上は特に変わりません。(footerが表示されていれば問題ありません。)
データの抽出と配列への格納ができたら、配列をJavaScriptへ渡し、グラフを作ります。
まず以下のPHP配列をJavaScriptへ渡す記述を「endwhile」の下に追記します。
$json_spendingcat_amount = json_encode($amount_sum);
$json_spendingcat_item = json_encode($item_list);配列を渡す記述を追記したら、次は以下をindex.phpの<script>内にある、window.onloadの中に追記します。
const dataSpendingCat = [{ //グラフの情報
type: "pie", //グラフのタイプ=円グラフ
values: <?php echo $json_spendingcat_amount; ?>, //値=PHP配列 金額配列
labels: <?php echo $json_spendingcat_item; ?>, //ラベル=PHP配列 カテゴリー名配列
textinfo: "label+percent", //グラフに表示するテキスト=割合とカテゴリー名
textposition: "inside", //グラフに表示するテキストの位置=内側、外側にしたい場合はoutsideを指定
automargin: true, //自動余白=有効
direction: 'clockwise', //グラフの向き=時計回りに割合の多い順
hoverinfo: 'skip' //ホバーした時の情報=表示しない
}]
const layout = { //グラフのレイアウト
height: 400, //グラフの高さ
width: 400, //グラフの幅
margin: { //余白
"t": 0, //top
"b": 0, //bottom
"l": 0, //left
"r": 0 //right
},
font: { //データテキスト
size: 16 //font-size: 16px;と同じ
},
showlegend: false, //グラフ横の情報=非表示にする
}
//Plotly.newPlot('表示する要素のid', グラフの情報, グラフのレイアウト)で表示する
Plotly.newPlot('graph-1', dataSpendingCat, layout);他にも色々設定できる項目はあるのですが、今回は上記の設定で進めます。
詳しい使い方は公式ドキュメントをご覧ください。
上記を追記すると画面に支出カテゴリー割合のグラフが表示されます。
グラフのレイアウトは使いまわすので、ここからはPHPで該当項目を抽出するSQLを実行→配列に追加とJSON式に変換するプログラムと、JavaScriptでデータの設定を追加していきます。
収入カテゴリーグラフ
//SQL抽出と配列格納
<?php
$amount_sum = array();
$item_list = array();
$sql = 'SELECT SUM(records.amount) as sum, income_category.name
FROM records
LEFT JOIN income_category ON records.income_category = income_category.id
WHERE records.type=1 AND records.user_id=? AND records.date LIKE ?
GROUP BY records.income_category
ORDER BY sum DESC';
$stmt = $db->prepare($sql);
$stmt->bind_param('is', $user_id, $graph_month_param);
$stmt->execute();
$stmt->store_result();
$count = $stmt->num_rows();
$stmt->bind_result($amount, $item);
while ($stmt->fetch()) :
$amount_sum[] = $amount;
if (is_null($item)) :
$item_list[] = '不明';
else :
$item_list[] = $item;
endif;
endwhile;
$json_incomecat_amount = json_encode($amount_sum);
$json_incomecat_item = json_encode($item_list);
?>//JavaScriptにデータ情報を設定
const dataIncomeCat = [{
type: "pie",
values: <?php echo $json_incomecat_amount; ?>,
labels: <?php echo $json_incomecat_item; ?>,
textinfo: "label+percent",
textposition: "inside",
automargin: true,
direction: 'clockwise',
hoverinfo: 'skip'
}]
:
レイアウト部分(省略)
:
//表示
Plotly.newPlot('graph-2', dataIncomeCat, layout);
クレジットカードグラフ
//SQL抽出と配列格納
<?php
$amount_sum = array();
$item_list = array();
$sql = 'SELECT SUM(records.amount) as sum, creditcard.name
FROM records
LEFT JOIN creditcard ON records.credit = creditcard.id
WHERE records.type=0 AND records.payment_method = 2 AND records.user_id=? AND records.date LIKE ?
GROUP BY records.credit
ORDER BY sum DESC';
$stmt = $db->prepare($sql);
$stmt->bind_param('is', $user_id, $graph_month_param);
$stmt->execute();
$stmt->store_result();
$count = $stmt->num_rows();
$stmt->bind_result($amount, $item);
while ($stmt->fetch()) :
$amount_sum[] = $amount;
if (is_null($item)) :
$item_list[] = '不明';
else :
$item_list[] = $item;
endif;
endwhile;
$json_credit_amount = json_encode($amount_sum);
$json_credit_item = json_encode($item_list);
?>//JavaScriptにデータ情報を設定
const dataCredit = [{
type: "pie",
values: <?php echo $json_credit_amount; ?>,
labels: <?php echo $json_credit_item; ?>,
textinfo: "label+percent",
textposition: "inside",
automargin: true,
direction: 'clockwise',
hoverinfo: 'skip'
}]
:
レイアウト部分(省略)
:
//表示
Plotly.newPlot('graph-3', dataCredit, layout);
スマホ決済グラフ
//SQL抽出と配列格納
<?php
$amount_sum = array();
$item_list = array();
$sql = 'SELECT SUM(records.amount) as sum, qr.name
FROM records
LEFT JOIN qr ON records.qr = qr.id
WHERE records.type=0 AND records.payment_method=3 AND records.user_id=? AND records.date LIKE ?
GROUP BY records.qr
ORDER BY sum DESC';
$stmt = $db->prepare($sql);
$stmt->bind_param('is', $user_id, $graph_month_param);
$stmt->execute();
$stmt->store_result();
$count = $stmt->num_rows();
$stmt->bind_result($amount, $item);
while ($stmt->fetch()) :
$amount_sum[] = $amount;
if (is_null($item)) :
$item_list[] = '不明';
else :
$item_list[] = $item;
endif;
endwhile;
$json_qr_amount = json_encode($amount_sum);
$json_qr_item = json_encode($item_list);
?>//JavaScriptにデータ情報を設定
const dataQr = [{
type: "pie",
values: <?php echo $json_qr_amount; ?>,
labels: <?php echo $json_qr_item; ?>,
textinfo: "label+percent",
textposition: "inside",
automargin: true,
direction: 'clockwise',
hoverinfo: 'skip'
}]
:
レイアウト部分(省略)
:
//表示
Plotly.newPlot('graph-4', dataQr, layout);
以上ですべてのグラフが出力されました。
ここで最後のグラフを表示する記述をfor文で回す記述に変更します。
//修正前
Plotly.newPlot('graph-1', dataSpendingCat, layout);
Plotly.newPlot('graph-2', dataIncomeCat, layout);
Plotly.newPlot('graph-3', dataCredit, layout);
Plotly.newPlot('graph-4', dataQr, layout);
//修正後
const dataNameList = [dataSpendingCat, dataIncomeCat, dataCredit, dataQr]; //各データ変数を配列に格納
const dataOutputElement = ['graph-1', 'graph-2', 'graph-3', 'graph-4']; //出力する要素のidを配列に格納
for (let i = 0; i < dataNameList.length; i++) {
Plotly.newPlot(dataOutputElement[i], dataNameList[i], layout);
}画面上は特に変わりません。コンソールでエラーが出ていなければ正しく書き換えができています。
しかし、データがない月も空のまま出力されるので、データが入っているときだけグラフを表示するようにします。
for文の中にif文を組み込み、trueのときだけ表示する記述を呼び出します。
for (let i = 0; i < dataNameList.length; i++) {
if (dataNameList[i][0].values.length !== 0) {
Plotly.newPlot(dataOutputElement[i], dataNameList[i], layout);
}
}dataNameList[i][0].values.lengthでデータがないときは「0」が返ってくるので、!==0とすることでデータがあるときだけ表示する処理が走るようにしました。
グラフの隣に表を表示する
グラフだけだと項目にいくら登録されているかがわからないので、グラフの隣に表を表示します。
以下をそれぞれのPHP配列をJSON化しているプログラムの下に追記します。
<table class="p-table--graph">
<tr>
<th>項目名</th>
<th>金額</th>
</tr>
<?php
for ($i = 0; $i < count($item_list); $i++) : ?>
<tr>
<td><?php echo $item_list[$i]; ?></td>
<td><?php echo '¥' . number_format($amount_sum[$i]); ?></td>
</tr>
<?php endfor; ?>
</table>CSSはすでに設定済みです。以上をそれぞれの要素に追記すると以下のようになります。
データがないときの処理
その追記に該当のデータがないときの処理として、グラフは先程表示のプログラムを読み込まないことで、空のグラフが表示されないようにしました。
しかし上記で追加したテーブルは表示が残るので、こちらもデータがないときは表示させず、「データがありません」と表示させる処理に修正します。
まずtableタグをif文で囲い、予め処理している$count変数の値で出力するかの判定をします。
そして条件に当てはまらない場合=データがない場合は「データがありません」の要素を表示するようにもします。
各項目のテーブル要素部分を以下のように書き換えます。
<?php if ($count !== 0) : ?>
<table class="p-table--graph">
<tr>
<th>項目名</th>
<th>金額</th>
</tr>
<?php
for ($i = 0; $i < count($item_list); $i++) : ?>
<tr>
<td><?php echo $item_list[$i]; ?></td>
<td><?php echo '¥' . number_format($amount_sum[$i]); ?></td>
</tr>
<?php endfor; ?>
</table>
<?php else : ?>
<p>データがありません</p>
<?php endif; ?>テーブルタグをif文で囲み、データがないときの出力も書き加えると、以下のようにデータがない箇所はグラフやテーブルは表示されず、「データがありません」と表示されます。
スマホ時のグラフレイアウト
現在の状態でスマホサイズにすると、円グラフが画面からはみ出してしまいます。
これはJavaScriptのグラフレイアウト部分で、高さや幅を数値で指定しているためです。
スマホ時に画面幅をはみ出さないようにするためには、もう1つスマホサイズのグラフレイアウトを用意する必要があります。
JavaSciptのグラフレイアウトの下に、以下のスマホサイズ時のグラフレイアウト情報を追記します。
const layoutSp = {
height: 300,
width: 300,
margin: {
"t": 0,
"b": 0,
"l": 0,
"r": 0
},
font: {
size: 12
},
showlegend: false,
}そして、グラフを表示するプログラムをif文で囲い、画面幅によって処理するグラフ表示プログラムを切り替えます。
//修正前
for (let i = 0; i < dataNameList.length; i++) {
if (dataNameList[i][0].values.length !== 0) {
Plotly.newPlot(dataOutputElement[i], dataNameList[i], layout);
}
}
//修正後
if (window.outerWidth > 900) {
//PCサイズ
for (let i = 0; i < dataNameList.length; i++) {
if (dataNameList[i][0].values.length !== 0) {
Plotly.newPlot(dataOutputElement[i], dataNameList[i], layout);
}
}
} else {
//スマホサイズ
for (let i = 0; i < dataNameList.length; i++) {
if (dataNameList[i][0].values.length !== 0) {
Plotly.newPlot(dataOutputElement[i], dataNameList[i], layoutSp);
}
}
}以上のように画面幅によって、読み込む処理を変えることで、スマホサイズでもグラフがはみだすことなく表示されるようになりました。
スマホ時のタブメニューにレポートを追加
スマホ時の画面下のタブメニューに、今回実装したレポート要素を追加します。
まずはメニューを増やします。
<!-- スマホ用切り替えタブ -->
<?php if (!isset($_GET['detail'])) : ?>
<ul class="p-switch-tab" id="tab">
<li class="p-switch-tab__item is-active" data-tab="tab-1">
<i class="fa-solid fa-pen"></i>
入力
</li>
<li class="p-switch-tab__item" data-tab="tab-2">
<i class="fa-solid fa-calendar-days"></i>
カレンダー
</li>
<li class="p-switch-tab__item" data-tab="tab-3">
<i class="fa-solid fa-list"></i>
一覧
</li>
<!--以下追記-->
<li class="p-switch-tab__item" data-tab="tab-4">
<i class="fa-solid fa-chart-pie"></i>
レポート
</li>
<!--追記ここまで-->
</ul>
<?php endif; ?>
<!-- スマホ用切り替えタブ -->スマホ時の画面したタブメニューに「レポート」が追加されました。
最後にレポートを押下すると、グラフとテーブルが表示されるようにします。
レポート要素のsectionタグのid属性に「report」を追加し、class属性に「hide、js-content、fade-in」を追加し、data-tab属性を追加し「tab-4」を記述します。
<section id="report" class="p-section p-section__report hide js-switch-content fade-in" data-tab="tab-4">以上の追記でタブメニューと連携することができるようになりました。
追加カスタム
現在グラフの右上に表示されているモードバーと呼ばれるアイコンを、スマホ時は表示しないようにします。
スマホ時のグラフ読み込みのlayoutSpの後ろに「{displayModeBar: false}」をカンマ区切りで追加します。
else {
//スマホサイズ
for (let i = 0; i < dataNameList.length; i++) {
if (dataNameList[i][0].values.length !== 0) {
Plotly.newPlot(dataOutputElement[i], dataNameList[i], layoutSp, {
displayModeBar: false
});
}
}
}以上の追記でスマホ時にはモードバーが表示されなくなりました。
またPCでも同じ追記をすることでモードバーを非表示にできます。
最後に
今回は各月の「支出カテゴリー、収入カテゴリー、クレジットカード、スマホ決済」の項目ごとのグラフ化機能を実装しました。
最後までお読みいただきありがとうございました。
スポンサーリンク
コメント