ACFの範囲で、Charts.cssを利用して棒グラフを作成
ACFには、数字の範囲を設定することができる、範囲フィールドがあります。今回は、ACFの範囲で、Chart.cssを利用して棒グラフを作成する方法を紹介します。
出典 : Charts.css
今回のDEMOは、年齢分布の棒グラフです。
範囲を入力すると、年代ごとの棒グラフが表示されるように設定しました。
ACF設定
まず、最大値のフィールドを作成します。フィールドタイプは、範囲です。フィールドラベルに、編集画面に表示する名前、フィールド名にPHPに記入する名前を設定します。初期値は、100に設定します。
フィールドタイプは、範囲。初期値は、100に設定
| 項目 | 設定値 |
|---|---|
| フィールドタイプ | 範囲 |
| フィールドラベル | MAX |
| フィールド名 | add_max |
| 初期値 | 100 |
次に年代別のフィールドを作成します。まず、10代未満です。フィールドタイプは、範囲です。フィールドラベルに、編集画面に表示する名前、フィールド名にPHPに記入する名前を設定します。初期値は、0に設定します。
初期値は、0に設定
| 項目 | 設定値 |
|---|---|
| フィールドタイプ | 範囲 |
| フィールドラベル | 10代未満 |
| フィールド名 | add_age00 |
| 初期値 | 0 |
残りの年代別フィールドも、同じように作成します。これで、ACFの設定は終了です。
残りの年代別フィールドも、同じように作成
コード
シングルページループ内に、下記コードを入力します。
<table class="charttable charts-css bar multiple stacked show-heading show-labels data-spacing-10 ">
<caption><b>AGE DISTRIBUTION CHART</b></caption>
<?php if (get_field('add_age00')): ?>
<tr>
<th>10代未満</th>
<td style="--size: calc(<?php the_field('add_age00'); ?> / <?php the_field('add_max'); ?>); --color: #bbb;"><?php the_field('add_age00'); ?>% </td>
</tr>
<?php endif ?>
<?php if (get_field('add_age10')): ?>
<tr>
<th>10代</th>
<td style="--size: calc(<?php the_field('add_age10'); ?> / <?php the_field('add_max'); ?>); --color: #bbb;"><?php the_field('add_age10'); ?>% </td>
</tr>
<?php endif ?>
<?php if (get_field('add_age20')): ?>
<tr>
<th>20代</th>
<td style="--size: calc(<?php the_field('add_age20'); ?> / <?php the_field('add_max'); ?>); --color: #bbb;"><?php the_field('add_age20'); ?>% </td>
</tr>
<?php endif ?>
<?php if (get_field('add_age30')): ?>
<tr>
<th>30代</th>
<td style="--size: calc(<?php the_field('add_age30'); ?> / <?php the_field('add_max'); ?>); --color: #bbb;"><?php the_field('add_age30'); ?>% </td>
</tr>
<?php endif ?>
<?php if (get_field('add_age40')): ?>
<tr>
<th>40代</th>
<td style="--size: calc(<?php the_field('add_age40'); ?> / <?php the_field('add_max'); ?>); --color: #bbb;"><?php the_field('add_age40'); ?>% </td>
</tr>
<?php endif ?>
<?php if (get_field('add_age50')): ?>
<tr>
<th>50代</th>
<td style="--size: calc(<?php the_field('add_age50'); ?> / <?php the_field('add_max'); ?>); --color: #bbb;"><?php the_field('add_age50'); ?>% </td>
</tr>
<?php endif ?>
<?php if (get_field('add_age60')): ?>
<tr>
<th>60代</th>
<td style="--size: calc(<?php the_field('add_age60'); ?> / <?php the_field('add_max'); ?>); --color: #bbb;"><?php the_field('add_age60'); ?>% </td>
</tr>
<?php endif ?>
<?php if (get_field('add_age70')): ?>
<tr>
<th>70代</th>
<td style="--size: calc(<?php the_field('add_age70'); ?> / <?php the_field('add_max'); ?>); --color: #bbb;"><?php the_field('add_age70'); ?>% </td>
</tr>
<?php endif ?>
<?php if (get_field('add_age80')): ?>
<tr>
<th>80代以上</th>
<td style="--size: calc(<?php the_field('add_age80'); ?> / <?php the_field('add_max'); ?>); --color: #bbb;"><?php the_field('add_age80'); ?>% </td>
</tr>
<?php endif ?>
</table>Charts.cssのサイトから、charts.min.cssをダウンロードし、読み込みます。CSSでスタイルを整えます。
.charttable {
width: 90%;
margin: auto;
max-width: 1200px;
padding: 10em 0;
font-size: 0.9em;
}
.charttable th {
font-weight: 500;
}
.charttable caption {
font-size: 2em;
height: 3em;
}設置
編集画面に、ACF チャートフィールドが作成されます。まず、最大値を設定するため、MAXに最大値を設定します。同じ値を最大値となる60代に設定します。
残りの年代のフィールドにそれぞれ数値を合計が、100となるように設定します。これで、設定終了です。
編集画面に、ACF チャートフィールドが作成
MAXに最大値を設定。同じ値を最大値となる60代に設定
残りの年代にそれぞれ数値を設定
以上で今回の説明は終了です。数値のみで、グラフが作成できるので簡単ですね。また、キャプション、項目をACFのテキストで設定すれば、グラフの内容を自由に設定することも可能です。
