📊

Chart.js完全ガイド：実務で使える構造とTips

に公開
JavaScript
frontend
Chart.js
tech

Vue + Chart.js を使いながら、実務にすぐ使える Chart.js の構造、オプション、カスタムTipsをまとめます。

Chart.js の基本構造

new Chart(ctx, {
  type: 'line',      // チャートの種類
  data: { ... },     // データ定義
  options: { ... },  // オプション設定
  plugins: [ ... ]   // カスタム機能（任意）
});

data 構造の例

data: {
  labels: ['1回目', '2回目', '3回目'],
  datasets: [
    {
      label: '個人データ',
      data: [872, 845, 883],
      borderColor: '#4db8ff',
      backgroundColor: 'transparent',
      borderWidth: 2,
      pointRadius: 4,
    },
    {
      label: 'チーム平均',
      data: [887, 887, 887],
      borderColor: '#ff6384',
      borderDash: [4, 4],
      pointRadius: 0,
    }
  ]
}

options 構造の例

options: {
  responsive: false,
  maintainAspectRatio: false,
  scales: {
    x: { display: false },
    y: { display: false },
  },
  plugins: {
    legend: { display: false },
    tooltip: {
      enabled: true,
      callbacks: {
        title: items => `${items[0].label} 回目`,
        label: item => `${item.dataset.label}: ${item.formattedValue}`
      }
    }
  }
}

カスタム plugins 例（値表示）

plugins: [
  {
    id: 'valueLabels',
    afterDatasetsDraw(chart) {
      const { ctx } = chart;
      ctx.save();
      chart.data.datasets.forEach((dataset, i) => {
        const meta = chart.getDatasetMeta(i);
        if (!meta.hidden && dataset.label === '個人') {
          meta.data.forEach((element, index) => {
            const value = dataset.data[index];
            ctx.fillStyle = '#fff';
            ctx.font = '10px sans-serif';
            ctx.textAlign = 'center';
            ctx.fillText(value, element.x, element.y - 10);
          });
        }
      });
      ctx.restore();
    }
  }
]

✅ fillText の位置調整

プロパティ 説明
element.x 点のX座標（横）
element.y 点のY座標（縦）
textAlign 'left' / 'center' / 'right'
textBaseline 'top' / 'middle' / 'bottom' など 
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
ctx.fillText('872', element.x, element.y - 10);

✅ よく使うチャートの種類

  • line: 線グラフ
  • bar: 棒グラフ
  • pie, doughnut: 円グラフ
  • radar: レーダーチャート
  • scatter: 散布図

✅ よく使う拡張機能

機能 説明
増減率(%)の表示 (value - avg) / avg * 100 を計算して表示
データ無しの対応 全ての値が null の場合 afterDraw でメッセージを表示
平均線ラベル追加 fillText('平均: 887') などで直接表示可能
外部プラグイン chartjs-plugin-datalabels, annotation など

Chart.jsはVueやReactプロジェクトでも簡単に使え、
プラグインを活用すれば本格的なダッシュボードレベルまで拡張可能です。

Discussion