The data visualization skill generates interactive graphs and charts in HTML using Chart.js.
Overview
With this skill, you can automatically generate beautiful, responsive, and interactive graphs from datasets. It is ideal for business reports, data analysis results, dashboards, and more.
Key Features
- Rich Chart Types: Line, bar, pie, doughnut, radar, scatter, bubble, polar area, etc.
- Interactive: Detailed display on hover, click events, zoom, pan
- Responsive Design: Automatically adapts to any screen size
- Animation: Smooth chart rendering animations
- Customizable: Fine adjustments possible for colors, fonts, styles, axis labels, etc.
- Multiple Chart Support: Multiple charts can be placed on a single page
- Export: Can be downloaded as PNG/JPEG images
Usage
Basic Usage
データ可視化HTMLを作成してください。
データ: 売上データ（1月: 120万, 2月: 150万, 3月: 180万, 4月: 140万）
グラフタイプ: 折れ線グラフ
タイトル: "2024年売上推移"
Generating Multiple Charts
以下のデータでダッシュボードを作成:
1. 月別売上（折れ線グラフ）
2. 商品カテゴリ別売上（円グラフ）
3. 地域別売上（棒グラフ）
4. 顧客満足度（レーダーチャート）
Customization Examples
データ可視化を作成:
- データ: [10, 20, 30, 40, 50]
- グラフタイプ: 棒グラフ
- 色: グラデーション（青から緑）
- アニメーション: バウンス
- 凡例: 下部に配置
Supported Chart Types
1. Line Chart
Ideal for visualizing time-series data and trends
- Single/multiple lines
- Area chart (filled)
- Step Line Chart
2. Bar Chart
Ideal for comparisons by category
- Vertical bar chart
- Horizontal bar chart
- Stacked bar chart
- Grouped bar chart
3. Pie Chart
Displaying proportions relative to the whole
- Pie chart
- Donut Chart
- Semi-Circle Chart
4. Radar Chart
Comparison of multidimensional data
- Spider Chart
- Polar Area Chart
5. Scatter Plot
Visualization of correlations
- Basic scatter plot
- Bubble Chart
6. Mixed Charts
Combining multiple chart types
- Line + bar chart
- Custom combinations
Data Format
Conversion from CSV data
CSVデータを可視化:
日付,売上,利益
2024-01,1000,200
2024-02,1200,250
2024-03,1100,220
JSON Data
{
"labels": ["1月", "2月", "3月", "4月"],
"datasets": [{
"label": "売上",
"data": [100, 120, 110, 140]
}]
}
Table Data
| 商品 | 売上 | シェア |
|---------|------|--------|
| 商品A | 500 | 35% |
| 商品B | 400 | 28% |
| 商品C | 300 | 21% |
| 商品D | 200 | 14% |
Customization Options
Colors and Themes
カラースキーム:
- default: Chart.jsデフォルト
- blue: 青系グラデーション
- green: 緑系グラデーション
- warm: 暖色系
- cool: 寒色系
- pastel: パステルカラー
- vibrant: ビビッドカラー
- monochrome: モノクローム
Animation
アニメーションタイプ:
- linear: リニア
- easeInQuad: イーズインクアッド
- easeOutQuad: イーズアウトクアッド
- easeInOutQuad: イーズインアウトクアッド
- easeInCubic: イーズインキュービック
- bounce: バウンス
Layout
レイアウトオプション:
- 凡例位置: top, bottom, left, right
- グラフサイズ: small, medium, large, custom
- グリッド線: 表示/非表示
- 軸ラベル: カスタマイズ可能
Implementation Examples
Example 1: Sales Dashboard
Input:
2024年Q1の売上ダッシュボードを作成。
含めるグラフ:
1. 月別売上推移（折れ線）
2. 商品カテゴリ別内訳（円グラフ）
3. 週別売上比較（棒グラフ）
テーマ: ビジネス（青系）
Generated output:
- HTML page containing 3 responsive charts
- Interactive legends and tooltips
- Print CSS
Example 2: KPI Dashboard
Input:
KPIダッシュボード作成:
- 目標達成率（ゲージチャート）
- 月次トレンド（折れ線グラフ）
- 部門別パフォーマンス（レーダーチャート）
- 前年比較（棒グラフ）
Generated output:
- A complete dashboard containing 4 charts
- Real-time update support
- With export functionality
Example 3: Data Analysis Report
Input:
データ分析結果の可視化:
相関分析: 散布図
分布: ヒストグラム
時系列: 折れ線グラフ
統計サマリー: 箱ひげ図
Generated output:
- Statistical chart set
- Data table included
- Display of statistical values
Displaying Charts
The generated HTML file:
# ブラウザで直接開く
open visualization.html
# またはローカルサーバーで
python -m http.server 8000
# http://localhost:8000/visualization.html
Interaction Features
- Hover: Display data point details
- Click: Toggle dataset visibility
- Zoom: Zoom in/out with mouse wheel
- Pan: Drag to pan the graph
- Legend: Click to toggle datasets
- Export: Download as PNG/JPEG image
Use Cases
Business Analysis
- Sales Reports
- KPI Dashboard
- Financial Analysis
- Market Analysis
Scientific Data
- Visualization of Experimental Results
- Statistical Analysis
- Time Series Data
- Correlation Analysis
Web Application
- Real-time Monitoring
- User Dashboard
- Analytics
- Performance Metrics
Best Practices
-
Choosing the Right Chart Type: Choose a chart that matches the nature of the data
- Time series → Line chart
- Comparison → Bar chart
- Proportion → Pie chart
- Correlation → Scatter plot
-
Color Usage:
- Consideration for color blindness
- Appropriate contrast
- Meaningful color coding
-
Data Labels:
- Clear axis labels
- Display units
- Appropriate formatting
-
Performance:
- Aggregate large amounts of data
- Animation optimization
- Responsive support
-
Accessibility:
- Alternative text
- Keyboard operation support
- Screen reader support
Troubleshooting
The chart does not display
Cause: Chart.js is not loaded Solution: Check internet connection, check the CDN URL
Data does not display correctly
Cause: Invalid data format Solution: Check console errors, check data structure
Responsive does not work
Cause: Container size issue
Solution: maintainAspectRatio Check options
Advanced Features
Plugins
// データラベルプラグイン
plugins: {
datalabels: {
display: true,
color: 'white'
}
}
Custom Tooltips
tooltip: {
callbacks: {
label: function(context) {
return context.label + ': ' + context.formattedValue + '万円';
}
}
}
Animation Callbacks
animation: {
onComplete: function() {
console.log('アニメーション完了');
}
}
Reference Links
Limitations
- 3D charts are not supported (2D only)
- Very large numbers of data points (10000+) may cause performance degradation
- Old browsers (IE11 and earlier) are not supported
Version Information
- Chart.js: 4.4.0
- Skill Version: 1.0.0
Usage example:
月別売上データを折れ線グラフで可視化してください。
データ:
1月: 250万円
2月: 280万円
3月: 320万円
4月: 290万円
5月: 350万円
6月: 380万円
タイトル: "2024年上半期売上推移"
色: 青系グラデーション
アニメーション: スムーズ
With this prompt, a complete interactive HTML chart is generated!