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

メールアドレスが公開されることはありません。

関連記事

no image

JavaScriptでコンソールに画像を出力する

以下のurl()のカッコ内に画像のURLを指定して実行すると、コンソールにその画像を表示することができます。 console.log("%c ", ‘background: url …

no image

ブラウザのコンソールからページ内の画像リストを確認する

ブラウザのコンソールにdocument.imagesの内容を出力すると、現在の文書内にある画像のリストが返され、任意の要素をクリックでその画像を確認することができます。 console.log(doc …

no image

画像のExif情報を読み込むJavaScriptライブラリExif.jsの使い方

Exif.jshttps://github.com/exif-js/exif-js 使い方 ここではローカルサーバーに配置したHTMLファイルから使用します。fileプロトコルでアクセスしている場合は …

no image

カルーセルを実装するjQueryプラグインslickの使い方

こんにちは、今日はカルーセルを実行できるjQueryプラグイン、slickの使い方についてまとめていきます。 公式サイト https://kenwheeler.github.io/slick/ ダウン …

no image

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

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