製作互動式圖表：使用Plotly.js建立餅圖和儀表板圖表，第五部分

如果您從一開始就關注本系列，您可能已經注意到 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 標誌。您可以使用嵌套在family、size 和color 屬性來設定圓餅圖磁區內部或外部的文字顏色"inline ">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 图表系列的最后一个教程。第一个介绍性教程为您提供了该库的概述。第二、第三和第四教程分别向您展示了如何创建折线图、条形图和气泡图。我希望您喜欢本教程以及整个系列。如果您有任何疑问，请随时在评论中告诉我。

以上是製作互動式圖表：使用Plotly.js建立餅圖和儀表板圖表，第五部分的詳細內容。更多資訊請關注PHP中文網其他相關文章！