Interaktive Diagramme erstellen: Kreisdiagramme und Dashboard-Diagramme mit Plotly.js erstellen, Teil 5

Wenn Sie diese Serie von Anfang an verfolgt haben, ist Ihnen vielleicht aufgefallen, dass Plotly.js dasselbe verwendet scatter 类型来创建折线图和气泡图。唯一的区别是，我们在创建折线图时必须将 mode 设置为 lines，而在创建气泡图时必须将 markers 设置为 mode.

Ähnlich können Sie mit Plotly.js Kreisdiagramme, Donut-Diagramme und Messdiagramme erstellen, indem Sie denselben Wert für die Eigenschaft type verwenden und die Werte anderer Eigenschaften je nach dem Diagramm ändern, das Sie erstellen möchten.

Erstellen Sie Kreisdiagramme in Plotly.js

Sie können ein Kreisdiagramm in Plotly.js erstellen, indem Sie das Attribut type 属性设置为 pie 来在 Plotly.js 中创建饼图。还有其他属性，例如 opacity、visible 和 name 也是其他图表类型所共有的。 name 属性用于提供当前饼图跟踪的名称。该名称随后显示在图例中以供识别。您可以通过将 showlegend 属性分别设置为 true 或 false 来显示或隐藏图表图例中的饼图跟踪。您可以使用 labels auf pie setzen. Es gibt weitere Eigenschaften wie opacity, visible und name auch für andere Diagramme den Typen gemeinsam. Das Attribut name wird verwendet, um den Namen der aktuellen Kreiskurve anzugeben. Dieser Name wird dann zur Identifizierung in der Legende angezeigt. Sie können dies anzeigen, indem Sie das Attribut showlegend auf true bzw. false setzen Oder blenden Sie die Kreisdiagrammspur in der Diagrammlegende aus. Sie können das Attribut labels verwenden, um Beschriftungsnamen für verschiedene Teile des Kreisdiagramms festzulegen.

Bei Kreisdiagrammen werden Markierungsobjekte verwendet, um das Erscheinungsbild verschiedener Teile des Diagramms zu steuern. Array-Wert im marker 中的 color 属性可用于设置饼图每个扇区的颜色。不同扇区的颜色可以指定为 color-Attribut verschachtelt.

Sie können color 和 width 属性来设置包围每个扇区的所有线条的颜色和宽度。您还可以选择使用布尔值 sort 属性对饼图的所有扇区从大到小进行排序。同样，借助 direction 属性，可以将扇区的方向更改为 顺时针 或 逆时针 auch innerhalb eines Linienobjekts verschachtelt verwenden.

Der folgende Code erstellt ein einfaches Kreisdiagramm, das die Waldfläche der fünf größten Länder der Welt auflistet.

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

Wie Sie sehen, machen wir das nicht mehr mit Hilfe von x 和 y 属性来指定我们要绘制的点。现在，这是在 values 和 labels. Der Prozentsatz wird automatisch anhand des eingegebenen Werts ermittelt.

Standardmäßig beginnt das erste Segment des Kreisdiagramms bei 12 Uhr. Sie können den Startwinkel des Diagramms mithilfe der Eigenschaft rotation ändern, die Werte zwischen -360 und 360 akzeptiert. Der Standardwert für 12 Uhr entspricht dem Winkel 0.

Wenn Sie möchten, dass ein bestimmter Ausschnitt im Diagramm hervorsticht, können Sie das Attribut pull 属性，该属性可以接受一个数字或值在 0 到 1 之间的数字数组。 pull verwenden, um einen bestimmten Sektor aus dem Kreisdiagramm herauszuziehen. Die Zugentfernung entspricht einem Bruchteil des größeren Radius des Kuchens oder Donuts.

Es ist sehr einfach, ein Kreisdiagramm in ein Donutdiagramm umzuwandeln, indem Sie den Wert des Attributs hole angeben. Es wird ein bestimmter Radiusabschnitt aus dem Kreisdiagramm ausgeschnitten, um ein Donutdiagramm zu erstellen.

Sie können die Breite und Farbe der Linien um jeden Sektor ändern, indem Sie die colors 属性来控制饼图中各个扇区的颜色。还可以借助嵌套在线条对象内的 width 和 color-Eigenschaften verwenden, die im Markierungsobjekt verschachtelt sind. Die Standardbreite der Begrenzungslinie beträgt 0. Das bedeutet, dass standardmäßig keine Linien um die Sektoren gezogen werden.

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

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

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

Das obige ist der detaillierte Inhalt vonInteraktive Diagramme erstellen: Kreisdiagramme und Dashboard-Diagramme mit Plotly.js erstellen, Teil 5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!