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

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

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

no image

フレキシブルなJavaScriptチャートライブラリTauchartsの使い方

サンプルコード 公式ドキュメントのTutorialsの内、簡易的なものを実際に動かしてみます。https://api.taucharts.com/tutorials/1min.html <htm …

no image

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

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

no image

ブラウザのコンソールからページ内の埋め込みリストを確認する

ブラウザのコンソールにdocument.embedsの内容を出力すると、現在の文書内にある埋め込みのリストが返されます。 console.log(document.embeds)

no image

inputタグで選択した画像をimgタグに表示する

コード input要素で画像を選択した際に、選択した画像をimg要素に表示するサンプルコードです。 URL.createObjectURL()を使用する FileReader.readAsDataUR …