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

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

no image

JavaScriptで0埋めする方法

こんにちは、今日はJavaScriptで0埋めする方法についてまとめていきます。 0埋め 以下のような関数で第一引数に0埋めしたい数値を、第二引数に数値の桁数を指定すると、指定桁数になるように0埋めさ …

no image

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

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

no image

JavaScriptでMath.jsを用いて組み合わせの数の計算をする

math.combinations関数の第一引数に総数を、第二引数に取り出す数を渡すと、組み合わせの数が返されます。 <html> <head> <script type …

no image

ブラウザとモバイルデバイス用のインタラクティブチャートを実装するJavaScriptチャートライブラリGoogle Chartsの使い方

公式サイト https://developers.google.com/chart サンプルコード <html> <head> <script type="te …