饼图和仪表图：使用 Plotly.js 解锁交互性，第 5 部分

如果您从一开始就关注本系列，您可能已经注意到 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 图表系列的最后一个教程。第一个介绍性教程为您提供了该库的概述。第二、第三和第四教程分别向您展示了如何创建折线图、条形图和气泡图。我希望您喜欢本教程以及整个系列。如果您有任何疑问，请随时在评论中告诉我。