plotly.js、パート1：開始を使用してインタラクティブなチャートを作成します

chart.jsの開始というタイトルのシリーズでは、chart.jsを使用してレスポンシブキャンバスベースのチャートを簡単に作成する方法を学びました。このシリーズは、図書館が提供する7つの基本チャートタイプをカバーしました。ただし、これらのチャートをインタラクティブにするために、追加の機能を備えたより複雑なチャートを作成する必要がある場合があります。このシリーズでは、ラインチャート、バーチャート、バブルチャート、ドットプロットチャートなど、plotly.jsを使用してさまざまな種類のチャートを作成する方法を学びます。これは、D3.jsとstack.glの上に構築された高レベルの宣言ライブラリです。 Plotlyを最高のJavaScriptチャート作成ライブラリの1つにする機能のリストを次に示します。

作成した3Dチャートは、GPUが提供するすべてのパワーを最大限に活用するためにWebGLの助けを借りてレンダリングされます。色やラベルからグリッドライン、レジェンドまで、すべてのJSON属性を使用してカスタマイズできます。シリーズの次の3つの部分でさまざまなチャートタイプをカスタマイズする方法を学びます。ライブラリをインストールするには、さまざまな方法があります。

最初のオプションは、次のコマンドを実行することにより、

npm

を使用してインストールを実行することです。ただし、使用するNPMパッケージを自動的にブラウザが処理できるものに変換するバンドラーをセットアップする必要があります。さらに、実際にパッケージを使用するために、おそらくESMを使用する必要があります。 ESMの詳細については、こちらをご覧ください。

プロトタイプの簡単なソリューションが必要な場合は、plotly.js CDNを使用してライブラリに直接リンクすることもできます。

npm install plotly.js<br>

このチュートリアルを書いている時点で、ライブラリの最新バージョンは2.14.0です。ライブラリの模倣と圧縮後のファイルサイズは1.1 MBです。非マイニングと非圧縮バージョンのサイズは3.5 MBです。ご覧のとおり、このライブラリが提供する機能の長いリストには価格があります。

バージョン1.15から始めると、それぞれが特定のチャートタイプを作成できるさまざまな部分バンドルから選択できます。ベーシック、デカルト、GEO、GL3D、GL2D、MAPBOX、FINARCE、およびSTRICTの7つの異なるバンドルがあります。次の行を使用して、これらのバンドルのCDNリンクを取得できます。

<script type="text/javascript" src="https://cdn.plot.ly/plotly-2.14.0.min.js"></script><br>

または、NPMを使用している場合は、そのバンドル用のパッケージをインストールできます。

https://cdn.plot.ly/plotly-bundleName-2.14.0.min.js<br><br>// Therefore the basic bundle becomes:<br>https://cdn.plot.ly/plotly-basic-2.14.0.min.js<br><br>// and the cartesian bundle becomes:<br>https://cdn.plot.ly/plotly-cartesian-2.14.0.min.js<br>

単一のバンドルからチャートを描画する必要がある場合は、この方法を使用してファイルサイズを大幅に減らすことができます。それらのそれぞれに関するいくつかの追加情報を以下に示します。

• BASIC：このバンドルには、histogram2D、pie、scatterternaryトレースモジュールが含まれています。このバンドルの圧縮されたマイニフィスバージョンのサイズは238.2 kbです。このバンドルの圧縮された縮小バージョンのサイズは224.1 kbです。このバンドルの圧縮された縮小バージョンのサイズは354 kbです。
• gl2d：このバンドルには scatter> scatterggl
、 pointcloud<li>、<coduggl> <codul> codur codul codulggl <codeggl>、<codeggl>、<code>縮小と圧縮後の362.9 kbのサイズはありません。<strong> </strong><code>scatterMapbox ：このバンドルには、 scatter<code>scatter3dand surface</codemapbox>トレースモジュールが含まれています。この場合のファイルサイズは328.6 kbです。mesh3d
• ファイナンス：ファイナンスバンドルを使用して、時系列、candlestick、その他のチャートタイプを作成して金融データをプロットできます。このモジュールは、 sprction <code> bar <soce>、<code>ヒストグラム<code>、<code> pie <code>、<code> ohlc、および condlestick<code>scatterトレースモジュールで構成されています。このバンドルは標準のバンドルよりも10％大きいため、実際に必要な場合を除き、使用しないでください。scatterglpointcloudheatmapglcontourglチャートを使用して、ウェブページに適切なバンドルを作成してロードするチャートを決定したら、Plotly.jsを使用して独自のチャートを作成し始めることができます。最初に行う必要があるのは、グラフを描画する必要がある空の div<code>parcoords要素を作成することです。

  チャートでプロットするデータを用意してください。この例では、乱数を使用してチャートを作成しています。最後に、plot()

  、データ、レイアウトオプションなどのすべての情報を提供する必要があります。非常に基本的なラインチャートを作成するためのコードは次のとおりです。div

npm install plotly.js<br>

plotly.jsのすべてのチャートは、JSONオブジェクトを使用して宣言的に作成されます。チャートのすべてのプロパティは、その色やデータと同様に、チャートの外観と動作を完全にカスタマイズするために使用できる対応するJSON属性を備えています。最初のものは

traces

と呼ばれます。これは、グラフにプロットされる単一のシリーズのデータ​​に関する情報を提供するために使用されるオブジェクトです。 2番目のカテゴリは

layoutです。これは、タイトルや注釈などのチャートの他のすべての側面を制御する異なる属性を提供します。さまざまなトレースがチャートタイプによってさらに分類され、チャートを描画するために利用可能な属性は、タイプ属性の値に依存します。上記の例では、トレースタイプとチャートでプロットしたいデータを保存するオブジェクトを作成しました。次のCodepenデモは、上記のコードの最終結果を示しています。

traceAデモでわかるように、グラフをズームイン、ズームアウト、または自動スケールすることができます。画像としてチャートをダウンロードすることもできます。チャート自体は、その鋭い線で非常にプロフェッショナルに見えます。

レイアウト属性このシリーズのチュートリアルの残りの部分で、チャートをカスタマイズする

。それを行う前に、フォント、タイトル、x軸、y軸などのすべてのチャートタイプに共通する側面を制御するさまざまなレイアウト属性の基本的な知識も必要です。オプションはオブジェクトを使用して指定され、これらの値はデフォルトでチャートのすべてのコンポーネントによって使用されます。

、

、および

キーは、

キー内にネストされています。それらを使用して、それぞれグローバルフォントの色、グローバルフォントサイズ、グローバルフォントファミリーを設定できます。

各チャートには、現在のチャートのタイトルを設定するために使用できるtitle属性があります。これにより、ユーザーはチャートで何をプロットしているかについての情報を提供します。タイトルのフォントプロパティは、titlefont属性を使用して指定できます。グローバルfont属性と同じように、color、size、familyキーをtitlefont属性属性の内側に入れて、タイトルのフォント関連のプロパティを制御するために使用できます。また、チャートの周りの間隔と、

キーの下にネストされたさまざまな属性を使用してプロットエリアを制御することもできます。すべての値はピクセルで指定されます。

width左マージンは、height>属性、margin属性を使用して右マージン、

属性を使用した上部マージン、および

属性を使用して下マージンを使用して指定されます。プロット領域と軸線は、デフォルトで非常に近いです。 lキー内にネストされているr属性を使用して、プロット領域の周りにいくつかのスペースを追加できます。パディングはピクセルで指定されており、デフォルト値はゼロです。tbチャート全体の背景と、ウェブサイトのテーマに合わせてプロットエリアに独自の色を選択できます。これらの色は両方ともデフォルトでは白に設定されていますが、それぞれpadおよびmarginキーを使用してそれぞれの異なる値を指定できます。

チャート内のすべての軸のタイトルと異なるフォントプロパティを指定することもできます。フォントプロパティは、それぞれの軸の軸キー内にネストされています。また、タイトルに使用されるフォントの軸の基本色と色を独立して制御する能力もあります。paper_bgcolorplot_bgcolorチャートにプロットされているポイントは、ゼロまでずっと下がらないことがあります。そのような場合、軸上でプロットによって作成されたダニもゼロに伸びていません。ただし、プロットされているポイントの範囲に関係なく、ティックを常にゼロから開始する必要がある場合は、その値を

。

。

に設定できます。チュートリアルでは、plotly.jsライブラリのさまざまな機能について学びました。また、あなたのニーズに応じてチャートの外観をカスタマイズするために、さまざまなレイアウト属性とともにライブラリのインストールと使用状況についても説明しました。

この投稿は、ジェイコブジャクソンからの貢献により更新されました。ジェイコブは、ウェブ開発者、テクニカルライター、フリーランサー、オープンソースの寄稿者です。

以上がplotly.js、パート1：開始を使用してインタラクティブなチャートを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。