使用Plotly.js創建交互式圖表，第1部分：入門

>在標題為“從Chart.js開始”的系列中，您學習瞭如何使用Chart.js輕鬆創建基於響應帆布的圖表。該系列涵蓋了圖書館提供的七種基本圖表類型。但是，您可能需要創建具有其他功能的更複雜的圖表，以使這些圖表交互式。

是最佳的免費使用庫之一，以創建各種響應式，交互式和功能豐富的圖表。在本系列中，您將學習如何使用plotly.js創建不同的圖表，包括線圖，條形圖，氣泡圖表和點圖表。這是一個建立在D3.js和stack.gl之上的高級聲明庫。以下是使繪圖成為最佳JavaScript圖表庫之一的功能的列表：

您可以使用Plotly.js輕鬆創建交互式圖表。您使用庫創建的任何圖表都配備了縮放，放大，平盤，自動縮放等功能。當您想研究具有大量繪製點的圖表時，這些功能非常有用。所有這些事件均在API中公開，因此您可以在觸發這些事件的任何一個時編寫自定義代碼以執行自己的操作。

高性能在繪製大量點時高性能使Plotly.js成為一個不錯的選擇。由於大多數圖表都是使用SVG創建的，因此您可以在瀏覽器之間獲得相當數量的兼容性，並且能夠導出任何圖表的高質量圖像。但是，在DOM中繪製大量的SVG元素可能會對性能產生不利影響。該庫使用stack.gl創建高性能的2D和3D圖表。

>
• >
• 您創建的任何3D圖表都在WebGL的幫助下渲染，以充分利用GPU所提供的所有功能。
>

在開始使用plotly.js之前，安裝plotly

，我們需要先安裝它。通過運行以下命令：

>此選項可能是最優雅，最靈活的，可以使用許多不同的方法來安裝庫。但是，您將需要設置一個捆綁器，該捆綁器會自動將您使用的NPM軟件包轉換為瀏覽器可以處理的東西。此外，為了實際使用該軟件包，您可能要使用ESM。您可以在此處閱讀有關ESM的更多信息。

如果您想要快速的原型解決方案，也可以使用plotly.js cdn並直接鏈接到庫：>在撰寫本教程時，

npm install plotly.js<br>

>最新版本的庫為2.14.0。縮小和壓縮庫後的文件大小為1.1 MB。非固定和未壓縮版的大小為3.5 MB。如您所見，該庫提供的一長串功能是價格。有七個不同的捆綁包：基本，笛卡爾，GEO，GL3D，GL2D，MAPBOX，FINALANCE和CRIGTH。您可以使用以下行獲取這些捆綁包的CDN鏈接：

>另外，如果使用npm，則可以安裝該捆綁包的軟件包。

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

>

>

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 ：此捆綁包包含直方圖2D ，pie ，ctastternary 跟踪模塊。該捆綁包的壓縮和縮小版本的大小為238.2 kb。
• geo
：此捆綁包允許您在JavaScript中創建不同類型的MAP相關圖表。 The compressed and minified version of this bundle has a size of 224.1 kB.
• gl3dscatter: This bundle allows you to create different types of 3D maps using the scatter<code>scatter3d, scatter3d<code>surface, surface<code>mesh3d, and mesh3d
trace modules.該捆綁包的壓縮和升級版本的大小為354 kb。
• scatterscatterglpointcloud gl2d heatmapgl：此捆綁包包含 scatse <code>contourgl， stactgl <code>parcoords， pointcloud <codef> code> code> heatmapggl <code> heatmapggl <code> code code code 模塊。它的尺寸為362.9 kb，縮小和壓縮後。
• scattermapbox scattermapbox：此捆綁包包含 scatse> scatse
和 scate> scattermapbox<li>trace模塊。在這種情況下，文件大小為328.6 kb。 <strong></strong><code>scatterbarhistogram finance pie：財務捆綁包可用於創建時間序列，燭台和其他圖表類型來繪製財務數據。該模塊由 scatter<code>ohlc， bar <code>candlestick，直方圖 ， pie <li>，<code> ohlc <strong>和<code> candlestick 跟踪模塊。

strict strict div strict strict

：嚴格的bundle bundle waster bundle waster ands unders conuctors卻造成了一切。該捆綁包比標準捆綁包大10％，因此，除非您真的需要它。您需要做的第一件事是創建一個空圖 div 元素，其中應繪製圖形。<p>有一些要在圖表上繪製的數據。在此示例中，我只是使用一些隨機數來創建圖表。最後，您必須調用<code>plot()>函數，並為其提供所有信息，例如容器div，數據和佈局選項。這是創建一個非常基本的線圖的代碼：

npm install plotly.js<br>

plotly.js中的所有圖表都是使用JSON對象聲明創建的。圖表的每個屬性，例如其顏色和數據，都有一個相應的JSON屬性，可用於完全自定義圖表的外觀和行為。

這些屬性可以將其廣泛分為兩類。第一個被稱為 traces ，它們是用於提供有關要在圖表上繪製的單個數據的信息的對象。第二類是>佈局，它提供了控製圖表的所有其他方面（例如標題或註釋）的不同屬性。圖表類型進一步分類了不同的跡線，並且可供您繪製圖表的屬性取決於> type 屬性的值。 在上面的示例中，我們創建了一個存儲您想要在圖表上繪製的跟踪類型和數據的對象。以下CODEPEN演示顯示了上述代碼的最終結果。

traceA在演示中可以看到，您可以放大，縮小或自動尺度圖表。您也可以將圖表下載為圖像。圖表本身看起來非常專業。

佈局屬性可以在本系列的其餘教程中自定義圖表

，我們將專注於學習與線條和條形圖（如線圖和條形圖）相關的不同屬性。在此之前，您還應該有一些基本知識，可以對不同的佈局屬性進行一些基本知識，該屬性控制所有圖表類型（例如字體，標題，X軸，Y軸等）所共有的方面。

您可以指定一個全局字體，在創建軌跡和其他佈局組件（如軸和標題）時應使用該全局字體。這些選項是使用font>對象指定的，默認情況下，圖表的所有組件都使用這些值。 color>，size和family鍵位於font鍵內。您可以使用它們分別設置全局字體顏色，全局字體大小和全局字體家庭。

>

每個圖表都有一個title屬性，可用於設置當前圖表的標題。它為用戶提供了有關您在圖表上繪製的內容的一些信息。可以使用titlefont>屬性指定標題的字體屬性。就像globalfont屬性一樣，可以使用嵌套在color>屬性內的size，family>鍵來控制標題的字體相關屬性。 titlefont

width>您可以使用height>>> and>> and> and> and> and> and> and> and and and and and and and and and and> geys指定圖表中圖表的寬度和高度。您還可以使用嵌套在margin鍵下的不同屬性來控製圖表周圍的間距以及繪圖區域。所有值均在像素中指定。

>

>使用l>屬性，使用r>屬性的右邊緣指定左邊邊緣，使用t屬性的最高邊距和使用b> attribute的最高邊距。默認情況下，繪圖區域和軸線非常接近。您可以使用嵌套在鍵內的pad屬性周圍添加一些空間。填充物以像素指定，其默認值為零。 margin

您可以為整個圖表的背景以及繪圖區域選擇自己的顏色，以匹配網站的主題。這兩種顏色默認情況下均設置為白色，但是您可以分別使用

和paper_bgcolor鍵為每個顏色指定每個顏色的不同值。 plot_bgcolor>

您也可以為圖表中所有軸指定標題和不同的字體屬性。字體屬性嵌套在相應軸的軸鍵內。您還可以獨立地控制軸的基本顏色，以及用於其標題的字體的顏色。

rangemode有時，將點繪製在圖表上的點不會一直降低到零。在這種情況下，繪製在軸上創建的壁蝨也不會擴展到零。但是，如果您希望滴答始終從零開始，無論繪製的要點範圍如何，都可以使用tozero>屬性，並將其值設置為

>。

npm install plotly.js<br>

>以下代碼snippet使用了一些屬性，使用了我們剛剛討論的一些屬性，以修改我們在上一節中創建的圖表的外觀。教程，您了解了plotly.js庫的各種功能。我還介紹了庫的安裝和使用以及不同的佈局屬性，以根據您的需要自定義圖表的外觀。

>這篇文章已通過雅各布·傑克遜（Jacob Jackson）的貢獻進行了更新。雅各布是網絡開發人員，技術作家，自由職業者和開源貢獻者。

以上是使用Plotly.js創建交互式圖表，第1部分：入門的詳細內容。更多資訊請關注PHP中文網其他相關文章！