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を使用しています。
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(グラフの項目)…というように設定が並んでいますので、順番に設定していきいます。
d3pieにアクセスし、画面上部のGeneratorをクリックすると円グラフを作成するページが表示されます。
手順2.
Examplesをクリックし、プルダウンに表示される4つのタイプの中から作成したい円グラフを選択します。
手順3.
上からTitle(円グラフのタイトル)、Size(サイズ)、Data(グラフの項目)…というように設定が並んでいますので、順番に設定していきいます。
② 円グラフのソースコードを記述しよう
③ 実装できたか確認してみよう
その他のTips
-
2022年01月12日
連載記事のNEWアイコンを任意の画像に変える方法bingo!CMSの「連載記事一覧用ユニット」にデフォルトで設定されている「NEW」アイコン(gif)を、任意の画像(jpg、png等)へ置き換えるTipsをご紹介します。
-
2020年02月19日
SNSの投稿やタイムラインをサイトに埋め込む方法bingo!CMSで制作したサイト上に、TwitterやFacebook、Instagramなど、各SNSの投稿やタイムラインを埋め込む方法をご紹介します。(随時追加)