Charts
A charting API for Drupal that enables creating dynamic charts without code, with integration for Views, Fields, and Blocks.
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
Content Analytics Dashboard
Create a Views-based dashboard showing content statistics such as page views, user engagement, and content creation trends over time. Use the Chart display format to visualize node counts by content type as a pie chart, and monthly content creation as a line chart.
Product Sales Reporting
Use Chart Fields to embed sales performance charts directly in product nodes. Store quarterly sales data in the chart field and display it as a column chart showing sales trends. The chart appears automatically on the product page.
KPI Monitoring Blocks
Use Charts Blocks to create gauge charts showing key performance indicators. Place these blocks in a dashboard layout using Layout Builder. Configure gauge zones (green/yellow/red) to indicate performance thresholds.
Combo Charts for Comparison
Create a Views-based combo chart showing both absolute values and trends. Use the main Chart display for column data, then attach a Chart attachment display with line chart type to overlay trend lines on the same chart.
Dynamic Data from External Sources
Use the Charts API to programmatically create charts from external data sources. Build render arrays with #type 'chart', add chart_data elements for series, and configure axes. The API example module demonstrates this approach at /charts/example/display.
Taxonomy-Colored Chart Series
When grouping Views data by taxonomy term, use the entity grouping color selection feature to automatically assign colors to chart series based on the taxonomy term. Colors can be set per entity, by field property value, or from a color_field on the referenced entity.
Tips
- Start with a Views Table display to understand your data structure, then convert to Chart format once data fields are properly configured.
- Use the Charts API Example module (/charts/example/display) as a reference when building programmatic charts.
- The #raw_options property allows passing library-specific options that aren't exposed in the standard configuration.
- For combo charts combining multiple chart types, create Chart attachment displays and attach them to the parent chart display.
- Enable debug mode during development to see the JSON being passed to the charting library - useful for troubleshooting and testing in library playgrounds.
- When using Views grouping with entity references, leverage the entity grouping color selection to automatically color-code chart series by taxonomy or other referenced entities.
- Chart Field data can be entered via CSV paste or manual table input - CSV is faster for large datasets.
- Install charting libraries locally using npm or Composer for better performance and reliability compared to CDN.
Technical Details
Admin Pages 2
/admin/config/content/charts
Configure default settings for all charts created on the site. These defaults apply to new charts but do not affect existing charts.
/admin/config/content/charts/advanced
Configure advanced options for chart debugging and CDN usage.
権限 1
Hooks 5
hook_chart_alter
Alter an individual chart before it is printed. Allows modification of chart properties before rendering.
hook_chart_CHART_ID_alter
Alter a specific chart identified by its chart ID. Same as hook_chart_alter but targets a specific chart.
hook_chart_definition_alter
Alter a chart's raw library representation after Charts module conversion. Provides access to library-specific options but may break when switching libraries.
hook_chart_definition_CHART_ID_alter
Alter a specific chart's raw library definition by chart ID.
hook_charts_plugin_supported_chart_types_alter
Modify the list of supported chart types for a chart library plugin. Requires defining chart types in a .charts_types.yml file.
Troubleshooting 6
Enable at least one charting library submodule (charts_billboard, charts_c3, charts_chartjs, charts_google, or charts_highcharts) at /admin/modules.
Check Advanced settings at /admin/config/content/charts/advanced and ensure 'Use a CDN by default' is enabled. Note that CDN usage may cause issues with Ajax and BigPipe.
Ensure at least one field has 'Provides Data' checked in the Chart settings. The label field cannot also be a data provider. Check that numeric fields are properly configured.
Different libraries support different chart types. The Charts module only shows chart types supported by the currently selected library. Switch libraries or check library documentation for supported types.
Enable 'Charts Debug' at /admin/config/content/charts/advanced. A collapsible details element will appear below each chart showing the JSON configuration sent to the library.
Highcharts is free for non-commercial use only. For commercial projects, purchase a license from highcharts.com or use an alternative open-source library like Chart.js or Billboard.js.
Security Notes 3
- The 'access all charts' permission should be granted carefully as it provides administrative control over chart functionality.
- Chart titles and labels are sanitized but custom raw_options are passed directly to the JavaScript library.
- CDN usage means external resources are loaded; for high-security environments, install libraries locally.