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

如果您从一开始就遵循此系列，您可能已经注意到Plotly.js使用相同的scatter类型来创建折线图和气泡图 。 唯一的区别是，我们必须设置mode ，以lines在创建线图表和markers产生气泡图时。

同样，Plotly.js允许您通过为type属性使用相同的值并根据要创建的图表更改其他属性的值来创建饼图，甜甜圈图和轨距图。

在Plotly.js中创建饼图

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

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

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

以下代码创建一个基本的饼图，该饼图列出了世界上排名前五个国家的森林面积 。

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属性来控制饼图中各个扇区的colors 。 包围每个扇区的线条的宽度和颜色也可以借助于嵌套在线条对象内部的width和color属性来更改。 封闭线的默认宽度为0。这意味着默认情况下不会在扇区周围绘制任何线。

还有一个hovertext属性，可用于为每个单独的扇区提供一些额外的文本信息。 当观众将鼠标悬停在某个扇区上时，这些信息将对他们可见。 出现文本的一个条件是hoverinfo属性应包含一个文本标志。 您可以设置使用饼图扇区的文本躺在内部或外部的颜色family ， size和color嵌套的内部属性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，这也是为饼图的隐藏区域设置的值。 这样可以将整个饼图在隐藏部分和可见部分之间平均分配。

这是创建我们的基本压力表的完整代码。 您应该注意，我已将应该隐藏的扇区的color属性设置为白色。 同样，相应扇区的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图表​​系列的最后一个教程。 第一个入门教程向您提供了该库的概述。 第二，第三和第四教程向您展示了如何分别创建折线图 ， 条形图和气泡图 。 我希望您喜欢本教程以及整个系列。 如果您有任何疑问，请随时在评论中让我知道。

翻译自: https://code.tutsplus.com/tutorials/create-interactive-charts-using-plotlyjs-pie-and-gauge-charts--cms-29216