Table of Contents
公式サイト
Plotly JavaScript Graphing Library | JavaScript | Plotly
https://plotly.com/javascript/
サンプルコード
使い方については公式サイトの以下ページに記載されています。
ここでは同様のチャートを表示するサンプルを作成します。
Getting Started | JavaScript | Plotly
https://plotly.com/javascript/getting-started/
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="chart" style="width:800px;height:400px;"></div>
<script>
chart = document.getElementById('chart');
Plotly.newPlot( chart, [{
x: [1, 2, 3, 4, 5],
y: [1, 5, 10, 20, 30] }], {
margin: { t: 0 } } );
</script>
</body>
</html>
必要なjsファイルを読み込み（3行目）
CDNかplotly.jsを読み込みます。
チャートを描画する要素を用意（7行目）
チャートを描画するdiv要素を用意し、参照するためのIDの指定、styleでチャートのサイズを指定してます。
チャートの描画（9～13行目）
Plotly.newPlot関数の第一引数に描画するHTML要素、第二引数にはチャートのデータをオブジェクトの配列で指定します。
データが一つの場合は要素が一つ、データが複数の場合はその分要素を用意します。
第三引数にはオプションをオブジェクトで指定して渡します。
