使用Plotly.js创建交互式图表第5部分：饼图和仪表图

如果您从一开始就关注这个系列，您可能已经注意到 Plotly.js 使用相同的scatter类型来创建折线图和气泡图。唯一的区别是我们必须在创建折线图和创建气泡图时设置mode为。linesmarkers

type 同样，Plotly.js 允许您通过使用相同的属性值并根据您要创建的图表更改其他属性的值来创建饼图、圆环图和仪表图。

在 Plotly.js 中创建饼图

type您可以通过将属性设置为.在 Plotly.js 中创建饼图pie。还有其他属性，例如opacity,visible也是name其他图表类型所共有的。该name属性用于为当前饼图轨迹提供名称。该名称随后会显示在图例中以供识别。showlegend您可以通过将属性分别设置为true或来显示或隐藏图表图例中的饼图轨迹false。labels您可以使用该属性为饼图的不同扇区设置标签名称。

在饼图的情况下，标记对象用于控制图表不同扇区的外观。color里面嵌套的属性marker可以用来设置饼图每个扇区的颜色。不同扇区的颜色可以指定为 color属性的数组值。

您还可以使用嵌套在线条对象中的color和属性设置包围每个扇区的所有线条的颜色和宽度。您还可以选择使用布尔属性width从最大到最小对饼图的所有扇区进行排序。sort类似地，扇区的方向可以更改为clockwise或counterclockwise 借助direction属性。

以下代码创建了一个基本饼图，其中列出了世界前五个***的森林面积。

var pieDiv = document.getElementById("pie-chart");

var traceA = {
  type: "pie",
  values: [8149300, 4916438, 4776980, 3100950, 2083210],
  labels: ['Russia', 'Canada', 'Brazil', 'United States', '***']
};

var data = [traceA];

var layout = {
  title: "Area Under Forest for Different Countries"
};

Plotly.plot(pieDiv, data, layout);

如您所见，我们不再使用 x和y 属性来指定我们想要绘制的点。现在这是在和的帮助下完成values的labels。百分比是根据输入值自动确定的。

使用Plotly.js创建交互式图表第5部分：饼图和仪表图第1张

默认情况下，饼图的第一片从 12 点开始。您可以使用该属性更改图表的起始角度，该rotation属性接受 -360 到 360 之间的值。默认 12 点钟的值等于角度 0。

如果您希望图表中的某个切片突出显示，您可以使用该pull属性，该属性可以接受一个数字或值介于 0 和 1 之间的数字数组。该pull属性用于将指定的扇区从饼图中拉出。拉距等于馅饼或甜甜圈较大半径的一小部分。

hole通过为属性指定一个值，可以很容易地将饼图转换为圆环图。它将从饼图中切出给定的半径部分以制作圆环图。

colors您可以使用嵌套在标记对象内的属性来控制饼图中各个扇区的颜色。包围每个扇区的线条的宽度和颜色也可以通过嵌套在线条对象中的width和属性进行更改。color封闭线的默认宽度为 0。这意味着默认情况下不会在扇区周围绘制任何线。

还有一个hovertext属性，可用于为每个单独的扇区提供一些额外的文本信息。当他们将鼠标悬停在一个扇区上时，这些信息将对他们可见。文本出现的一个条件是该hoverinfo属性应该包含一个文本标志。您可以分别使用嵌套在和对象内的family、size和属性设置位于饼图扇区内部或外部的文本颜色。colorinsidetextfontoutsidetextfont

下面的代码使用我们之前的饼图中的数据来创建一个圆环图，它使用我们刚刚了解的附加属性。

var pieDiv = document.getElementById("pie-chart");

var traceA = {
  type: "pie",
  values: [8149300, 4916438, 4776980, 3100950, 2083210],
  labels: ['Russia', 'Canada', 'Brazil', 'United States', '***'],
  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创建交互式图表第5部分：饼图和仪表图第2张

在 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创建交互式图表第5部分：饼图和仪表图第3张