Création de graphiques interactifs : création de diagrammes circulaires et de tableaux de bord avec Plotly.js, partie 5

Si vous suivez cette série depuis le début, vous avez peut-être remarqué que Plotly.js utilise la même chose scatter 类型来创建折线图和气泡图。唯一的区别是，我们在创建折线图时必须将 mode 设置为 lines，而在创建气泡图时必须将 markers 设置为 mode.

De même, Plotly.js vous permet de créer des diagrammes circulaires, des diagrammes en anneau et des diagrammes à jauge en utilisant la même valeur pour la propriété type et en modifiant les valeurs des autres propriétés en fonction du graphique que vous souhaitez créer.

Créez des diagrammes circulaires dans Plotly.js

Vous pouvez créer un diagramme circulaire dans Plotly.js en définissant l'attribut type 属性设置为 pie 来在 Plotly.js 中创建饼图。还有其他属性，例如 opacity、visible 和 name 也是其他图表类型所共有的。 name 属性用于提供当前饼图跟踪的名称。该名称随后显示在图例中以供识别。您可以通过将 showlegend 属性分别设置为 true 或 false 来显示或隐藏图表图例中的饼图跟踪。您可以使用 labels sur pie. Il existe d'autres propriétés comme opacity, visible et name également pour d'autres graphiques commun aux types. L'attribut name est utilisé pour fournir le nom de la trace à secteurs actuelle. Ce nom est ensuite indiqué dans la légende pour identification. Vous pouvez l'afficher en définissant l'attribut showlegend sur true ou false respectivement. Ou masquez la trace du graphique à secteurs dans la légende du graphique. Vous pouvez utiliser l'attribut labels pour définir les noms d'étiquettes pour différentes parties du graphique à secteurs.

Pour les diagrammes circulaires, les objets marqueurs sont utilisés pour contrôler l'apparence des différentes parties du diagramme. Valeur du tableau imbriquée dans l'attribut marker 中的 color 属性可用于设置饼图每个扇区的颜色。不同扇区的颜色可以指定为 color.

Vous pouvez également utiliser color 和 width 属性来设置包围每个扇区的所有线条的颜色和宽度。您还可以选择使用布尔值 sort 属性对饼图的所有扇区从大到小进行排序。同样，借助 direction 属性，可以将扇区的方向更改为 顺时针 或 逆时针 imbriqué dans un objet ligne.

Le code suivant crée un diagramme circulaire de base répertoriant la superficie forestière des cinq premiers pays du monde.

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);

Comme vous pouvez le constater, nous ne le faisons plus avec l'aide de x 和 y 属性来指定我们要绘制的点。现在，这是在 values 和 labels . Le pourcentage est automatiquement déterminé en fonction de la valeur saisie.

Par défaut, la première tranche du camembert commence à 12 heures. Vous pouvez modifier l'angle de départ du graphique à l'aide de la propriété rotation, qui accepte les valeurs comprises entre -360 et 360. La valeur par défaut de 12 heures est égale à l'angle 0.

Si vous souhaitez qu'une certaine tranche du graphique se démarque, vous pouvez utiliser l'attribut pull 属性，该属性可以接受一个数字或值在 0 到 1 之间的数字数组。 pull pour extraire un secteur spécifié du graphique circulaire. La distance de traction est égale à une fraction du plus grand rayon de la tarte ou du beignet.

Il est très simple de convertir un diagramme circulaire en diagramme en anneau en spécifiant la valeur de l'attribut hole. Il découpera une partie de rayon donnée du diagramme circulaire pour créer un diagramme en anneau.

Vous pouvez modifier la largeur et la couleur des lignes entourant chaque secteur à l'aide des propriétés colors 属性来控制饼图中各个扇区的颜色。还可以借助嵌套在线条对象内的 width 和 color imbriquées dans l'objet marqueur. La largeur par défaut de la ligne de délimitation est 0. Cela signifie que par défaut aucune ligne n'est tracée autour des secteurs.

Il y a aussi un hovertext 属性，可用于为每个单独的扇区提供一些额外的文本信息。当观看者将鼠标悬停在某个扇区上时，他们将可以看到这些信息。显示文本的条件之一是 hoverinfo 属性应包含 text 标志。您可以使用嵌套在 family、size 和 color 属性来设置饼图扇区内部或外部的文本颜色"inline">insidetextfont 和 outsidetextfont respectivement objet.

以下代码使用之前饼图中的数据来创建一个圆环图，该圆环图使用我们刚刚了解的其他属性。

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!