棒グラフ（Bar Chart）— 縦棒・横棒 2パターン

:root {
  --chart-blue:   #2B7FE8;
  --chart-orange: #FB923C;
  --chart-bg:     #F8FAFC;
  --chart-border: #E2E8F0;
  --chart-text:   #1E293B;
}

body {
  font-family: sans-serif;
  padding: 24px;
  background: var(--chart-bg);
  color: var(--chart-text);
}

.chart-section {
  margin-bottom: 48px;
}

.chart-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--chart-text);
}

/* 縦棒グラフ: 最大幅を指定して縦長にならないようにする */
.chart-wrap--vertical {
  max-width: 680px;
  height: 320px;
  background: #fff;
  border: 1px solid var(--chart-border);
  border-radius: 8px;
  padding: 16px;
  box-sizing: border-box;
}

/* 横棒グラフ: 高さを行数に合わせて余裕を持たせる */
.chart-wrap--horizontal {
  max-width: 680px;
  height: 280px;
  background: #fff;
  border: 1px solid var(--chart-border);
  border-radius: 8px;
  padding: 16px;
  box-sizing: border-box;
}

// data.json を fetch してグラフを描画する
document.addEventListener('DOMContentLoaded', function () {
  fetch('./data/data.json')
    .then(function (r) { return r.json(); })
    .then(function (data) {
      renderVertical(data.vertical);
      renderHorizontal(data.horizontal);
    })
    .catch(function (err) {
      console.error('データの取得に失敗しました:', err);
    });
});

// Pattern 1: 縦棒グラフ（単一系列）
function renderVertical(data) {
  var ctx = document.getElementById('bar-v-chart');
  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: data.labels,
      datasets: [{
        label: data.datasets[0].label,
        data: data.datasets[0].data,
        backgroundColor: 'rgba(43, 127, 232, 0.8)',
        borderColor: '#2B7FE8',
        borderWidth: 1,
        borderRadius: 4
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        title: {
          display: true,
          text: data.label,
          font: { size: 13 }
        },
        legend: { display: false }
      },
      scales: {
        y: {
          beginAtZero: true,
          ticks: {
            // 数値を「1,000人」形式で表示
            callback: function (value) {
              return value.toLocaleString() + '人';
            }
          }
        }
      }
    }
  });
}

// Pattern 2: 横棒グラフ（複数系列）
// indexAxis: 'y' を指定するだけで縦棒から横棒に切り替わる
function renderHorizontal(data) {
  var ctx = document.getElementById('bar-h-chart');
  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: data.labels,
      datasets: [
        {
          label: data.datasets[0].label,
          data: data.datasets[0].data,
          backgroundColor: 'rgba(43, 127, 232, 0.8)',
          borderColor: '#2B7FE8',
          borderWidth: 1,
          borderRadius: 4
        },
        {
          label: data.datasets[1].label,
          data: data.datasets[1].data,
          backgroundColor: 'rgba(251, 146, 60, 0.8)',
          borderColor: '#FB923C',
          borderWidth: 1,
          borderRadius: 4
        }
      ]
    },
    options: {
      indexAxis: 'y',
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        title: {
          display: true,
          text: data.label,
          font: { size: 13 }
        }
      },
      scales: {
        x: {
          beginAtZero: true,
          ticks: {
            callback: function (value) {
              return value.toLocaleString() + '万円';
            }
          }
        }
      }
    }
  });
}

{
  "vertical": {
    "label": "月別サイト訪問者数（2025年）",
    "labels": ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
    "datasets": [
      {
        "label": "訪問者数（人）",
        "data": [8200, 7600, 9100, 10400, 11200, 9800, 8700, 7300, 10100, 12500, 11800, 13200]
      }
    ]
  },
  "horizontal": {
    "label": "部門別予算と実績（2025年度）",
    "labels": ["営業部", "開発部", "マーケ部", "人事部", "総務部"],
    "datasets": [
      {
        "label": "予算（万円）",
        "data": [1200, 2400, 800, 600, 400]
      },
      {
        "label": "実績（万円）",
        "data": [1050, 2580, 720, 630, 380]
      }
    ]
  }
}