3テラバイト

プログラム関連備忘録サイト。主にゲーム。

HTML JavaScript

JavaScriptチャートライブラリPlotly.jsでチャートを描画する

投稿日:

公式サイト

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要素、第二引数にはチャートのデータをオブジェクトの配列で指定します。
データが一つの場合は要素が一つ、データが複数の場合はその分要素を用意します。
第三引数にはオプションをオブジェクトで指定して渡します。

-HTML, JavaScript


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です


reCaptcha の認証期間が終了しました。ページを再読み込みしてください。

関連記事

no image

タッチジェスチャーを実装するJavaScriptライブラリHammer.jsの使い方

こんにちは、今日はWebサイトにタッチジェスチャーを実装することができるJavaScriptライブラリ、Hammer.jsの使い方についてまとめていきます。 イベントの設定方法 通常のJavaScri …

no image

JavaScriptでブラウザ履歴の前のページや次のページへ移動する

前のページへ window.history.back() 次のページへ window.history.forward() 指定ページ数前へ window.history.go関数の引数にマイナスの数値 …

no image

グリッドレイアウトを実装するJavaScriptライブラリMasonryの使い方

こんにちは、今日はWebサイトにグリッドレイアウトを実装することができるJavaScriptライブラリ、Masonryの使い方についてまとめていきます。 公式サイト https://masonry.d …

no image

チャートを簡単に追加できるJavaScriptライブラリChart.jsの使い方

折れ線グラフ、棒グラフ、レーダーチャート、ドーナツチャート、円グラフ、ポーラチャート、バブルチャート、散布図等のチャートをWebサイトに簡単に追加することができます。 公式サイト https://ww …

no image

File APIでinput要素で選択したファイルの情報を確認する

サンプル <input type="file"> <script> const input = document.querySelector('i …