![](https://cxg-design.jp/wp-content/uploads/2024/06/acfchart_thumb02.png)
ACFの範囲で、Charts.cssを利用して棒グラフを作成
ACFには、数字の範囲を設定することができる、範囲フィールドがあります。今回は、ACFの範囲で、Chart.cssを利用して棒グラフを作成する方法を紹介します。
![](https://cxg-design.jp/wp-content/uploads/2024/06/0202da6a30cc264beda93bd2757d2e27.png)
出典 : Charts.css
今回のDEMOは、年齢分布の棒グラフです。
範囲を入力すると、年代ごとの棒グラフが表示されるように設定しました。
ACF設定
まず、最大値のフィールドを作成します。フィールドタイプは、範囲です。フィールドラベルに、編集画面に表示する名前、フィールド名にPHPに記入する名前を設定します。初期値は、100に設定します。
![](https://cxg-design.jp/wp-content/uploads/2024/06/c60d6627fdc10d42265b7984c768ace7.png)
フィールドタイプは、範囲。初期値は、100に設定
項目 | 設定値 |
---|---|
フィールドタイプ | 範囲 |
フィールドラベル | MAX |
フィールド名 | add_max |
初期値 | 100 |
次に年代別のフィールドを作成します。まず、10代未満です。フィールドタイプは、範囲です。フィールドラベルに、編集画面に表示する名前、フィールド名にPHPに記入する名前を設定します。初期値は、0に設定します。
![](https://cxg-design.jp/wp-content/uploads/2024/06/2fd31ebd98abc738a2f9cf648af7bc80.png)
初期値は、0に設定
項目 | 設定値 |
---|---|
フィールドタイプ | 範囲 |
フィールドラベル | 10代未満 |
フィールド名 | add_age00 |
初期値 | 0 |
残りの年代別フィールドも、同じように作成します。これで、ACFの設定は終了です。
![](https://cxg-design.jp/wp-content/uploads/2024/06/f59faae21db924e2efd9915cbed79ac6.png)
残りの年代別フィールドも、同じように作成
コード
シングルページループ内に、下記コードを入力します。
<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となるように設定します。これで、設定終了です。
![](https://cxg-design.jp/wp-content/uploads/2024/06/95566ea9beece2c121dcf8ca85e65484.png)
編集画面に、ACF チャートフィールドが作成
![](https://cxg-design.jp/wp-content/uploads/2024/06/cbe4688d5cd6e46e428dab032897c51b.png)
MAXに最大値を設定。同じ値を最大値となる60代に設定
![](https://cxg-design.jp/wp-content/uploads/2024/06/76e5fccb39603352533b19a1f16abba9.png)
残りの年代にそれぞれ数値を設定
以上で今回の説明は終了です。数値のみで、グラフが作成できるので簡単ですね。また、キャプション、項目をACFのテキストで設定すれば、グラフの内容を自由に設定することも可能です。