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

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

最初のオプションは、次のコマンドを?qū)g行することにより、

npm

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

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

npm install plotly.js<br>

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

バージョン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を使用している場(chǎng)合は、そのバンドル用のパッケージをインストールできます。

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>

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

• 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>トレースモジュールが含まれています。この場(chǎng)合のファイルサイズは328.6 kbです。mesh3d
• ファイナンス：ファイナンスバンドルを使用して、時(shí)系列、candlestick、その他のチャートタイプを作成して金融データをプロットできます。このモジュールは、 sprction <code> bar <soce>、<code>ヒストグラム<code>、<code> pie <code>、<code> ohlc、および condlestick<code>scatterトレースモジュールで構(gòu)成されています。このバンドルは標(biāo)準(zhǔn)のバンドルよりも10％大きいため、実際に必要な場(chǎng)合を除き、使用しないでください。scatterglpointcloudheatmapglcontourglチャートを使用して、ウェブページに適切なバンドルを作成してロードするチャートを決定したら、Plotly.jsを使用して獨(dú)自のチャートを作成し始めることができます。最初に行う必要があるのは、グラフを描畫(huà)する必要がある空の div<code>parcoords要素を作成することです。

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

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

npm install plotly.js<br>

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

traces

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

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

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

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

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

、

、および

キーは、

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

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

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

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

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

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

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

。

。

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

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

以上がplotly.js、パート1：開(kāi)始を使用してインタラクティブなチャートを作成しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。