Plotly.js 折れ線グラフ

by zu_min

HTML

<div id="plot" style="height:340px;"></div>

<script src="https://cdn.plot.ly/plotly-3.3.1.min.js" charset="utf-8"></script>

JavaScript

const x = Array.from({length: 120}, (_, i) => i);
const y = x.map(i => Math.sin(i / 10) * 20 + 100);

Plotly.newPlot("plot", [{
  x, y,
  type: "scatter", // scattergl にすると WebGL になる
  mode: "lines",
  name: "metric",
  hovertemplate: "x=%{x}<br>y=%{y:.2f}<extra></extra>"
}], {
  title: { text: "Plotly.js" },
  hovermode: "x unified",
  xaxis: { title: { text: "index" } },
  yaxis: {
    title: { text: "value" },
    fixedrange: true
  },
  showlegend: true, // データが1つだと判例が出ない
}, {
  scrollZoom: true, // ホイールでズーム
  displaylogo: false
});