bingo!CMSに円グラフを実装しよう

オープンソースの円グラフジェネレータ「d3pie」で作成した円グラフをbingo!CMSに実装する方法をご紹介します。

はじめに

 
検証用
d3pie(http://d3pie.org)について

d3pieはd3を利用してつくられたMITライセンスで配布されるオープンソースの円グラフジェネレータです。
※d3について詳しくはd3.js(Wikipedia)をご覧ください。

このジェネレータを使って円グラフを作成するとコードが自動で生成されます。
こちらはd3pieを使って作成した円グラフのサンプルです。
サイト内の言語は英語のみですが、直感的に作成でき円グラフは日本語入力が可能です。

今回はこのジェネレータを使用し作成した円グラフをbingo!CMSで実装する方法をご紹介します。
※このマニュアルのbingo!CMSのサンプル画像はbingo!CMS1.7.3を使用しています。

① 円グラフを作ろう

手順1.
d3pieにアクセスし、画面上部のGeneratorをクリックすると円グラフを作成するページが表示されます。

手順2.
Examplesをクリックし、プルダウンに表示される4つのタイプの中から作成したい円グラフを選択します。

手順3.
上からTitle(円グラフのタイトル)、Size(サイズ)、Data(グラフの項目)…というように設定が並んでいますので、順番に設定していきいます。
手順4.
最下部のGenerateボタンをクリックすると、円グラフのソースコードが表示されます。

手順5.
Javascript onlyをクリックし表示をJavascriptのみにします。

手順6.
Javascriptのソースコードをすべてコピーし、メモ帳などに貼り付けておきます。

② 円グラフのソースコードを記述しよう

手順1.
管理画面にログイン/メニュー&ページ管理/円グラフを記述したいページのページ編集ボタンをクリックしページ編集画面に入ります。

手順2.
ページ編集画面上部のツールバーからHTMLユニットをドラッグ&ドロップで配置します。
手順3.
HTMLユニットのユニット編集ボタンをクリックし、編集画面に入ります。

手順4.
以下をコピーしHTMLの欄に貼り付けて画面を保存します。
 
<div id="pieChart">読み込み中</div>
手順5.
ページ編集画面上部のツールバーにあるこのページ用のcssとjavascriptの設定をクリックします。

手順6.
以下をコピーしjavascriptの欄に貼り付けます。
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.1/d3.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/d3pie@0.2.1/d3pie/d3pie.min.js"></script>
手順7.
続けて、あらかじめd3pieからコピーしておいたjavascriptの記述を貼り付けます。

手順8.
javascriptの記述の<script>の下に以下をコピーして追加し、保存します。
 
j$('#pieChart').html('');

③ 実装できたか確認してみよう

手順1.
ページ編集画面に戻りページを再読み込みすると円グラフが表示されます。

手順2.
ページ編集画面上部にあるツールバーの右端にあるプレビューボタンをクリックし、表示を確認します。

手順3.
表示に問題がなければページを公開しましょう!これで操作は完了です。

ページトップ