如果您從一開始就關注本系列，您可能已經注意到 Plotly.js 使用相同的 scatter 類型來創建折線圖和氣泡圖。唯一的區別是，我們在創建折線圖時必須將 mode 設置為 lines，而在創建氣泡圖時必須將 markers 設置為 mode。
同樣，Plotly.js 允許您通過對 type 屬性使用相同的值并根據您要創建的圖表更改其他屬性的值來創建餅圖、圓環圖和儀表圖。
在 Plotly.js 中創建餅圖
您可以通過將 type 屬性設置為 pie 來在 Plotly.js 中創建餅圖。還有其他屬性，例如 opacity、visible 和 name 也是其他圖表類型所共有的。 name 屬性用于提供當前餅圖跟蹤的名稱。該名稱隨后顯示在圖例中以供識別。您可以通過將 showlegend 屬性分別設置為 true 或 false 來顯示或隱藏圖表圖例中的餅圖跟蹤。您可以使用 labels 屬性為餅圖的不同部分設置標簽名稱。
對于餅圖，標記對象用于控制圖表不同部分的外觀。嵌套在 marker 中的 color 屬性可用于設置餅圖每個扇區的顏色。不同扇區的顏色可以指定為 color 屬性的數組值。
您還可以使用嵌套在線條對象內的 color 和 width 屬性來設置包圍每個扇區的所有線條的顏色和寬度。您還可以選擇使用布爾值 sort 屬性對餅圖的所有扇區從大到小進行排序。同樣，借助 direction 屬性，可以將扇區的方向更改為 順時針 或 逆時針 。
以下代碼創建一個基本餅圖，其中列出了世界上前五個國家的森林面積。
var pieDiv = document.getElementById("pie-chart"); var traceA = { type: "pie", values: [8149300, 4916438, 4776980, 3100950, 2083210], labels: ['Russia', 'Canada', 'Brazil', 'United States', 'China'] }; var data = [traceA]; var layout = { title: "Area Under Forest for Different Countries" }; Plotly.plot(pieDiv, data, layout);
如您所見，我們不再使用 x 和 y 屬性來指定我們要繪制的點。現在，這是在 values 和 labels 的幫助下完成的。百分比是根據輸入值自動確定的。
默認情況下，餅圖的第一片從 12 點開始。您可以使用 rotation 屬性更改圖表的起始角度，該屬性接受 -360 到 360 之間的值。默認的 12 點鐘值等于角度 0。
如果您希望圖表中的某個切片脫穎而出，您可以使用 pull 屬性，該屬性可以接受一個數字或值在 0 到 1 之間的數字數組。 pull 屬性用于從餅圖中拉出指定的扇區。拉動距離等于餡餅或甜甜圈較大半徑的一小部分。
通過指定 hole 屬性的值，可以非常輕松地將餅圖轉換為圓環圖。它將從餅圖中切出給定的半徑部分以制作圓環圖。
您可以使用嵌套在標記對象內的 colors 屬性來控制餅圖中各個扇區的顏色。還可以借助嵌套在線條對象內的 width 和 color 屬性來更改包圍每個扇區的線條的寬度和顏色。包圍線的默認寬度為 0。這意味著默認情況下不會在扇區周圍繪制任何線。
還有一個 hovertext 屬性，可用于為每個單獨的扇區提供一些額外的文本信息。當觀看者將鼠標懸停在某個扇區上時，他們將可以看到這些信息。顯示文本的條件之一是 hoverinfo 屬性應包含 text 標志。您可以使用嵌套在 insidetextfont 和 outsidetextfont 分別是對象。
以下代碼使用之前餅圖中的數據來創建一個圓環圖，該圓環圖使用我們剛剛了解的其他屬性。
var pieDiv = document.getElementById("pie-chart"); var traceA = { type: "pie", values: [8149300, 4916438, 4776980, 3100950, 2083210], labels: ['Russia', 'Canada', 'Brazil', 'United States', 'China'], hole: 0.25, pull: [0.1, 0, 0, 0, 0], direction: 'clockwise', marker: { colors: ['#CDDC39', '#673AB7', '#F44336', '#00BCD4', '#607D8B'], line: { color: 'black', width: 3 } }, textfont: { family: 'Lato', color: 'white', size: 18 }, hoverlabel: { bgcolor: 'black', bordercolor: 'black', font: { family: 'Lato', color: 'white', size: 18 } } }; var data = [traceA]; var layout = { title: "Area Under Forest for Different Countries" }; Plotly.plot(pieDiv, data, layout);
在 Plotly.js 中創建儀表圖表
儀表圖的基本結構與圓環圖類似。這意味著我們可以使用一些巧妙選擇的值并通過仍然將 type 屬性設置為 pie 來創建簡單的儀表圖表。基本上，我們將隱藏整個餅圖的某些部分，使其看起來像儀表圖。
首先，我們需要為 values 屬性選擇一些值。為了簡單起見，我將使用餅圖的上半部分作為我的儀表圖。這意味著這些值應該在我想要可見的部分和我想要隱藏的餅圖部分之間平均分配。圖表的可見部分可以進一步分為更小的部分。以下是為儀表圖表選擇值的示例。
values: [100 / 5, 100 / 5, 100 / 5, 100 / 5, 100 / 5, 100]
上行中的數字 100 是任意的。可以看到，前五個切片加起來是100，這也是為餅圖隱藏區域設置的值。這將整個餡餅平均分為隱藏部分和可見部分。
這是創建基本儀表圖表的完整代碼。您應該注意到，我已將應隱藏的扇區的顏色屬性設置為白色。同樣，相應扇區的 text 和 labels 值也已設置為空字符串。 rotation 屬性已設置為 90，以便圖表不會從默認的 12 點鐘位置繪制。
var gaugeDiv = document.getElementById("gauge-chart"); var traceA = { type: "pie", showlegend: false, hole: 0.4, rotation: 90, values: [100 / 5, 100 / 5, 100 / 5, 100 / 5, 100 / 5, 100], text: ["Very Low", "Low", "Average", "Good", "Excellent", ""], direction: "clockwise", textinfo: "text", textposition: "inside", marker: { colors: ["rgba(255, 0, 0, 0.6)", "rgba(255, 165, 0, 0.6)", "rgba(255, 255, 0, 0.6)", "rgba(144, 238, 144, 0.6)", "rgba(154, 205, 50, 0.6)", "white"] }, labels: ["0-10", "10-50", "50-200", "200-500", "500-2000", ""], hoverinfo: "label" };
代碼的下一部分涉及儀表圖表的指針。您為 Degrees 變量設置的值將確定繪制針的角度。 radius 變量決定針的長度。屬性 x0 和 y0 用于設置線條的起點。同樣，屬性 x1 和 y1 用于設置線條的終點。
您可以借助 SVG 路徑為針創建更復雜的形狀。您所要做的就是將 type 屬性設置為 path 并使用 path 屬性指定實際路徑。您可以在參考的布局形狀部分閱讀更多相關信息。
var degrees = 115, radius = .6; var radians = degrees * Math.PI / 180; var x = -1 * radius * Math.cos(radians); var y = radius * Math.sin(radians); var layout = { shapes:[{ type: 'line', x0: 0, y0: 0, x1: x, y1: 0.5, line: { color: 'black', width: 8 } }], title: 'Number of Printers Sold in a Week', xaxis: {visible: false, range: [-1, 1]}, yaxis: {visible: false, range: [-1, 1]} }; var data = [traceA]; Plotly.plot(gaugeDiv, data, layout, {staticPlot: true});
本節的所有代碼都會創建以下儀表圖表。目前，該圖表不是很奇特，但它可以作為一個很好的起點。
最終想法
在本教程中，您學習了如何使用 Plotly.js 中的 pie 跟蹤類型創建餅圖和圓環圖。您還學習了如何仔細設置一些屬性的值，以將這些餅圖轉換為簡單的儀表圖。您可以在參考頁面上閱讀有關餅圖及其不同屬性的更多信息。
這是我們的交互式 Plotly.js 圖表系列的最后一個教程。第一個介紹性教程為您提供了該庫的概述。第二、第三和第四教程分別向您展示了如何創建折線圖、條形圖和氣泡圖。我希望您喜歡本教程以及整個系列。如果您有任何疑問，請隨時在評論中告訴我。
