![[オリジナル]チャートブロックの機能](https://digipress.info/_wp/wp-content/uploads/2021/04/chart-block.png)
ここで紹介する機能を利用するには、DigiPress 専用プラグイン「DigiPress Ex – Blocks Free」または「DigiPress Ex – Blocks」が必要です。
なお、「DigiPress Ex – Blocks Free」の場合は一部機能制限があります。
「DigiPress Ex – Blocks / Blocks Free」プラグインを利用することで、WordPress のブロックエディターにプラグインオリジナルの「チャート」ブロックが追加されます。
このブロックコンテンツは、入力されたデータを元にして、折れ線グラフ、棒グラフ、円グラフ、ドーナツチャート、レーダーチャートから指定したチャートで表示することができます。
その他のエディター機能については以下をご覧ください。
ブロックコンテンツ表示サンプル
ブロックの追加
オリジナルブロックは、ブロック追加ボタンから「DigiPress ブロック」グループを開いて追加します。

ブロック追加直後はチャートは表示されないため、右側サイドバーの設定パネルにあるいずれかの「プレビュー」ボタンをクリックすると、初期値のダミーデータでチャートを表示させることができます。


編集中のエディターでは、以下のように実際のブロックコンテンツの表示と同じ状態でカスタマイズができます。

右側サイドバー : 全体設定
右側の設定サイドバーにある「全体設定」では、作成するチャートの全般的な共通設定を行います。


作成可能なチャートタイプ
右側サイドバー : 座標設定
右側の設定サイドバーにある「座標設定」では、折れ線グラフと棒グラフに表示されるグラフに関するX軸とY軸の基本データを設定します。
円グラフ、ドーナツチャートを指定している場合は、単位ラベルのみの設定に変わります。

右側サイドバー : チャートデータ設定
右側の設定サイドバーにある「チャートデータ設定」では、実際に表示するチャートの比較項目名やその項目ごとの座標データと、チャートタイプに応じた各項目データのチャート上の配色を設定します。
このデータを元にチャートが描画されます。


比較項目ラベル
チャート上に表示する比較データアイテムごとのラベルを1行ごとに入力。
A店
B店
C店
東京都
北海道
大阪府
愛知県
10代
20代
30代
40代
比較項目データ
チャート上に表示する比較データアイテムごとの実データを入力します。
注意事項・仕様
- 「このブロックには、想定されていないか無効なコンテンツが含まれています」と表示された場合
-
変換せずに必ず最新仕様にリカバリー(復元) 本プラグインのアップデート後、エディター上のブロックで「このブロックには、想定されていないか無効なコンテンツが含まれています。」と表示された場合、旧バージョンから仕様が変更された可能性があります。
この場合は、HTML やクラシックブロックに変換せずに、必ず「ブロックのリカバリーを試行」を選択してアップデート後のバージョン仕様としてリカバリーしてください。
「ブロックのリカバリーを試行」を実行しない限り、既存のブロックは従来のバージョンの状態のままで表示されます。
無料版での機能制限
無料版(DigiPress Ex – Blocks Free)では、以下のカスタマイズオプションの利用が制限されています。
- チャートタイプの選択(折れ線グラフのみ)
- チャートタイトルの表示
- 座標点のカスタマイズ(形状選択、境界線カラー)
- X/Y軸のラベル表示
- 折れ線グラフ、棒グラフの垂直表示
- チャート幅の指定
ブロックコンテンツを本文以外(ウィジェットエリア)で表示する方法
DigiPressのオリジナルブロックを含め、WordPressのブロックエディターによるコンテンツを記事本文以外のウィジェットエリアに表示するには、「DigiPress Ex – Blocks」プラグインの「再利用コンテンツ」機能を利用することで実現できます。
詳しくは以下をご覧ください。