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.
表示に問題がなければページを公開しましょう！これで操作は完了です。

その他のTips

ページトップ