Chart.js 折れ線グラフ

by zu_min

HTML

<canvas id="c" height="120"></canvas>
<p>
  <button id="reset">Reset Zoom</button>
</p>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-zoom.min.js"></script>

JavaScript

// データ作成（共通っぽい形）
const labels = Array.from({ length: 120 }, (_, i) => i); // 0..119
const series = labels.map(i => Math.sin(i / 10) * 20 + 100);

const ctx = document.getElementById("c");

const chart = new Chart(ctx, {
  type: "line",
  data: {
    labels,
    datasets: [{
      label: "metric",
      data: series,
      borderWidth: 2,
      pointRadius: 0,
      tension: 0.15,
    }],
  },
  options: {
    responsive: true,
    interaction: { mode: "index", intersect: false },
    plugins: {
      tooltip: {
        callbacks: {
          label: (item) => ` y = ${item.parsed.y.toFixed(2)}`
        }
      },
      zoom: {
        pan: { enabled: true, mode: "x" },
        zoom: {
          wheel: { enabled: true },
          pinch: { enabled: true },
          mode: "x",
        }
      },
      title: {
        display: true,
        text: "Chart.js"
      }
    },
    scales: {
      x: { title: { display: true, text: "index" } },
      y: { title: { display: true, text: "value" } },
    }
  }
});

document.getElementById("reset").addEventListener("click", () => chart.resetZoom());