Charts
Views、Field、Blockと統合し、コードを書かずに動的なチャートを作成できるDrupal用チャートAPIモジュールです。
charts
インストール
composer require 'drupal/charts:^5.1'
概要
Chartsモジュールは、Drupal向けの包括的なチャートAPIを提供し、データを視覚的な情報に変換します。サイト構築者はコードを一切書くことなく動的なチャートを作成でき、同時に開発者向けにはプログラムによる制御が可能な強力なAPIも提供します。
Chartsは5つの主要なチャートライブラリを標準でサポートしています：Billboard.js、C3.js、Chart.js、Google Charts、Highchartsです。各ライブラリにはそれぞれの利点があり、オープンソースのD3ベースのライブラリからHighchartsのプレミアム機能まで様々です。このモジュールはこれらのライブラリの複雑さを抽象化し、チャート作成のための統一されたインターフェースを提供します。
このモジュールはUIを通じてチャートを作成する3つの主要な方法を提供します：Views統合（動的なデータ可視化用）、Chart Field（Entityにチャートを埋め込む用）、Chart Block（Layout Builderやブロック配置を通じてチャートを配置する用）です。開発者向けには、chart要素を持つrender arrayによる完全なプログラム制御が可能です。
Features
- 5つのチャートライブラリをサポート：Billboard.js、C3.js、Chart.js、Google Charts、Highcharts
- 14種類のチャートタイプ：area、bar、column、line、pie、donut、gauge、scatter、bubble、spline、boxplot、candlestick、heatmap、arearange
- 動的なデータ可視化のためのChartディスプレイ形式によるViews統合
- 手動データ入力でコンテンツEntityにチャートを埋め込むためのChart Fieldタイプ
- Layout Builderと従来のブロック配置用のChart Block
- 複数のチャートタイプを持つコンボチャート作成のためのViewsでのChart Attachments
- デュアル軸チャート用のセカンダリY軸サポート
- グループ化されたチャートシリーズ用のデータスタッキング機能
- 25色のデフォルトカラーとシリーズごとの色指定によるカラーカスタマイズ
- Entity Reference、Fieldプロパティ、またはcolor fieldによる色選択でのEntityグルーピング
- 外部ライブラリ用のCDNサポートとローカルコピー使用オプション
- トラブルシューティング用の生成されたJSONを表示するデバッグモード
- プログラムによるチャート作成のためのRender Element API
- チャートとライブラリ固有の定義をカスタマイズするためのAlter hook
- 設定可能な幅/高さと単位によるレスポンシブ対応
Use Cases
コンテンツ分析ダッシュボード
ページビュー、ユーザーエンゲージメント、コンテンツ作成トレンドなどのコンテンツ統計を表示するViewsベースのダッシュボードを作成します。Chartディスプレイ形式を使用して、コンテンツタイプ別のノード数をパイチャートとして、月別のコンテンツ作成を折れ線グラフとして可視化します。
商品売上レポート
Chart Fieldを使用して、商品ノードに直接売上パフォーマンスチャートを埋め込みます。チャートフィールドに四半期売上データを保存し、売上トレンドを示すカラムチャートとして表示します。チャートは商品ページに自動的に表示されます。
KPIモニタリングブロック
Charts Blocksを使用して、主要業績評価指標を示すゲージチャートを作成します。Layout Builderを使用してダッシュボードレイアウトにこれらのブロックを配置します。パフォーマンス閾値を示すためにゲージゾーン（緑/黄/赤）を設定します。
比較用コンボチャート
絶対値とトレンドの両方を示すViewsベースのコンボチャートを作成します。カラムデータ用のメインChartディスプレイを使用し、次にライン型のChartアタッチメントディスプレイをアタッチして同じチャートにトレンドラインをオーバーレイします。
外部ソースからの動的データ
Charts APIを使用して、外部データソースからプログラムでチャートを作成します。#type 'chart'のrender arrayを構築し、シリーズ用のchart_data要素を追加し、軸を設定します。APIの使用例は/charts/example/displayで確認できます。
タクソノミーカラーのチャートシリーズ
Viewsデータをタクソノミータームでグルーピングする際、Entityグルーピングの色選択機能を使用して、タクソノミータームに基づいてチャートシリーズに自動的に色を割り当てます。色はEntity単位、Fieldプロパティ値、または参照されたEntityのcolor_fieldから設定できます。
Tips
- Viewsのテーブルディスプレイから始めてデータ構造を理解し、データフィールドが適切に設定されたらChartフォーマットに変換してください。
- プログラムでチャートを構築する際は、Charts API Exampleモジュール（/charts/example/display）を参考にしてください。
- #raw_optionsプロパティを使用すると、標準設定で公開されていないライブラリ固有のオプションを渡すことができます。
- 複数のチャートタイプを組み合わせたコンボチャートには、Chartアタッチメントディスプレイを作成して親チャートディスプレイにアタッチしてください。
- 開発中はデバッグモードを有効にして、チャートライブラリに渡されるJSONを確認してください - トラブルシューティングやライブラリのプレイグラウンドでのテストに役立ちます。
- Entity Referenceを使用したViewsグルーピングでは、Entityグルーピングの色選択を活用して、タクソノミーやその他の参照Entityでチャートシリーズを自動的に色分けしてください。
- Chart Fieldデータは、CSVペーストまたは手動テーブル入力で入力できます - 大きなデータセットにはCSVが高速です。
- CDNよりもパフォーマンスと信頼性を向上させるため、npmまたはComposerを使用してチャートライブラリをローカルにインストールしてください。
Technical Details
Admin Pages 2
/admin/config/content/charts
サイトで作成されるすべてのチャートのデフォルト設定を構成します。これらのデフォルトは新しいチャートに適用され、既存のチャートには影響しません。
/admin/config/content/charts/advanced
チャートのデバッグとCDN使用に関する詳細オプションを設定します。
権限 1
Hooks 5
hook_chart_alter
印刷前に個々のチャートを変更します。レンダリング前にチャートのプロパティを変更できます。
hook_chart_CHART_ID_alter
チャートIDで識別される特定のチャートを変更します。hook_chart_alterと同じですが、特定のチャートを対象とします。
hook_chart_definition_alter
Chartsモジュールの変換後、チャートの生のライブラリ表現を変更します。ライブラリ固有のオプションにアクセスできますが、ライブラリを切り替えると動作しなくなる可能性があります。
hook_chart_definition_CHART_ID_alter
チャートIDで特定のチャートの生のライブラリ定義を変更します。
hook_charts_plugin_supported_chart_types_alter
チャートライブラリプラグインでサポートされるチャートタイプのリストを変更します。.charts_types.ymlファイルでチャートタイプを定義する必要があります。
Troubleshooting 6
/admin/modulesで少なくとも1つのチャートライブラリサブモジュール（charts_billboard、charts_c3、charts_chartjs、charts_google、またはcharts_highcharts）を有効にしてください。
/admin/config/content/charts/advancedの詳細設定を確認し、「デフォルトでCDNを使用」が有効になっていることを確認してください。CDNの使用はAjaxやBigPipeに問題を引き起こす可能性があることに注意してください。
Chart設定で少なくとも1つのフィールドに「データを提供」がチェックされていることを確認してください。ラベルフィールドはデータプロバイダーにはできません。数値フィールドが適切に設定されていることを確認してください。
ライブラリによってサポートされるチャートタイプが異なります。Chartsモジュールは現在選択されているライブラリでサポートされているチャートタイプのみを表示します。ライブラリを切り替えるか、サポートされているタイプについてライブラリのドキュメントを確認してください。
/admin/config/content/charts/advancedで「Chartsデバッグ」を有効にしてください。各チャートの下に、ライブラリに送信されるJSON設定を示す折りたたみ可能な詳細要素が表示されます。
Highchartsは非商用利用のみ無料です。商用プロジェクトの場合は、highcharts.comからライセンスを購入するか、Chart.jsやBillboard.jsなどの代替オープンソースライブラリを使用してください。
Security Notes 3
- 「access all charts」権限はチャート機能の管理制御を提供するため、慎重に付与してください。
- チャートのタイトルとラベルはサニタイズされますが、カスタムのraw_optionsはJavaScriptライブラリに直接渡されます。
- CDNの使用は外部リソースが読み込まれることを意味します。高セキュリティ環境では、ライブラリをローカルにインストールしてください。