DigiPress

Highly Flexible WordPress Theme

メニュー

[オリジナル]チャートブロックの機能

[オリジナル]チャートブロックの機能

ここで紹介する機能を利用するには、DigiPress 専用プラグイン「DigiPress Ex – Blocks Free」または「DigiPress Ex – Blocks」が必要です。
なお、「DigiPress Ex – Blocks Free」の場合は一部機能制限があります。

DigiPress Ex – Blocks / Blocks Free」プラグインを利用することで、WordPress のブロックエディターにプラグインオリジナルの「チャート」ブロックが追加されます。

このブロックコンテンツは、入力されたデータを元にして、折れ線グラフ、棒グラフ、円グラフ、ドーナツチャート、レーダーチャートから指定したチャートで表示することができます。

その他のエディター機能については以下をご覧ください。


ブロックコンテンツ表示サンプル

表示デモ折れ線グラフ
表示デモ棒グラフ
表示デモ棒グラフ(垂直)
表示デモ円グラフ
表示デモドーナツチャート
表示デモレーダーチャート

ブロックの追加

オリジナルブロックは、ブロック追加ボタンから「DigiPress ブロック」グループを開いて追加します。

「DigiPressブロック」から「チャート」を追加

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

プレビューをクリック
ダミーデータでのチャート表示

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

編集中のエディターの状態
実際の表示と同じ状態で編集が可能

右側サイドバー : 全体設定

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

全体設定
全体設定(つづき)

作成可能なチャートタイプ

  • 折れ線グラフ(水平)
  • 折れ線グラフ(垂直)
  • 棒グラフ(水平)
  • 棒グラフ(垂直)
  • 円グラフ
  • ドーナツチャート
  • レーダーチャート

右側サイドバー : 座標設定

右側の設定サイドバーにある「座標設定」では、折れ線グラフと棒グラフに表示されるグラフに関するX軸とY軸の基本データを設定します。

円グラフ、ドーナツチャートを指定している場合は、単位ラベルのみの設定に変わります。

右側サイドバー : チャートデータ設定

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

チャートデータ設定
チャートデータ設定(つづき)

比較項目ラベル

チャート上に表示する比較データアイテムごとのラベルを1行ごとに入力

例1

A店
B店
C店

例2

東京都
北海道
大阪府
愛知県

例3

10代
20代
30代
40代

比較項目データ

チャート上に表示する比較データアイテムごとの実データを入力します。

注意事項・仕様

変換せずに必ず最新仕様にリカバリー(復元)

本プラグインのアップデート後、エディター上のブロックで「このブロックには、想定されていないか無効なコンテンツが含まれています。」と表示された場合、旧バージョンから仕様が変更された可能性があります。

この場合は、HTML やクラシックブロックに変換せずに、必ず「ブロックのリカバリーを試行」を選択してアップデート後のバージョン仕様としてリカバリーしてください。

「ブロックのリカバリーを試行」を実行しない限り、既存のブロックは従来のバージョンの状態のままで表示されます。

無料版での機能制限

無料版(DigiPress Ex – Blocks Free)では、以下のカスタマイズオプションの利用が制限されています。

  • チャートタイプの選択(折れ線グラフのみ)
  • チャートタイトルの表示
  • 座標点のカスタマイズ(形状選択、境界線カラー)
  • X/Y軸のラベル表示
  • 折れ線グラフ、棒グラフの垂直表示
  • チャート幅の指定

ブロックコンテンツを本文以外(ウィジェットエリア)で表示する方法

DigiPressのオリジナルブロックを含め、WordPressのブロックエディターによるコンテンツを記事本文以外のウィジェットエリアに表示するには、「DigiPress Ex – Blocks」プラグインの「再利用コンテンツ」機能を利用することで実現できます。

詳しくは以下をご覧ください。