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でMath.jsを用いて階乗の計算をする

math.permutations関数の引数に任意の数値を渡すと、その階乗の値が返されます。また、第二引数にサブセットの値を渡すと、そこまでの計算結果が返されます。 <html> < …

no image

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

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

no image

JavaScriptで値を素因数分解する

以下のコードでは、渡された値を素因数分解して文字列で結果を返す関数primeFactorizationを定義しています。 function primeFactorization(value) { va …

no image

JavaScriptで配列やオブジェクトの一部を代入する分割代入

JavaScriptで変数に配列やオブジェクトから値を代入する際に、左辺の変数名に角括弧[]を付けることで配列やオブジェクトの一部のみ代入することが可能です。 以下の例では変数aに右辺の配列の内最初の …

no image

JavaScriptで呼び出し回数をカウントする関数Console.count

引数に任意のラベルを指定すると、ラベルごとに呼び出された回数をカウントし、現在の呼び出し回数を出力します。ラベルを省略した場合はラベルにdefaultを指定したものとして扱われます。 Console. …