Carta Pai dan Tolok: Membuka Kunci Interaktiviti dengan Plotly.js, Bahagian 5

Jika anda telah mengikuti siri ini sejak awal, anda mungkin perasan bahawa Plotly.js menggunakan jenis scatter yang sama untuk membuat carta garis dan buih. Satu-satunya perbezaan ialah kita mesti menetapkan mod kepada lines semasa membuat carta garis dan apabila mencipta carta gelembung, kita mesti set marker ditetapkan kepada mod. 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

Begitu juga, Plotly.js membenarkan anda membuat carta pai, carta donat dan tolok dengan menggunakan nilai yang sama untuk atribut type dan menukar nilai sifat lain bergantung pada carta yang anda ingin buat gambar.

Buat carta pai dalam Plotly.js

Anda boleh membuat carta pai dalam Plotly.js dengan menetapkan atribut type kepada pie. Terdapat sifat lain seperti opacity, visible dan name juga untuk carta lain biasa kepada jenis. Atribut name digunakan untuk memberikan nama jejak pai semasa. Nama ini kemudiannya ditunjukkan dalam legenda untuk pengenalan. Anda boleh memaparkan ini dengan menetapkan atribut showlegend kepada true atau false masing-masing Atau sembunyikan jejak carta pai dalam lagenda carta. Anda boleh menggunakan atribut labels untuk menetapkan nama label bagi bahagian carta pai yang berlainan. 🎜 🎜Untuk carta pai, objek penanda digunakan untuk mengawal penampilan bahagian carta yang berbeza. Sifat color yang bersarang dalam penanda boleh digunakan untuk menetapkan warna setiap kepingan carta pai. Warna sektor berbeza boleh ditentukan sebagai nilai tatasusunan atribut color. 🎜 🎜Anda juga boleh menetapkan semua baris yang mengelilingi setiap sektor menggunakan sifat color dan width yang bersarang dalam warna dan lebar objek garis. Anda juga boleh menggunakan atribut sort Boolean untuk mengisih semua kepingan carta pai daripada terbesar kepada terkecil. Begitu juga, dengan bantuan atribut direction, anda boleh menukar arah sektor kepada mengikut arah jam atau kaunter jarum jam. 🎜 🎜Kod berikut mencipta carta pai asas yang menyenaraikan kawasan hutan lima negara teratas di dunia. 🎜

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

🎜Seperti yang anda lihat, kami tidak lagi menggunakan atribut x dan y untuk menentukan titik yang ingin kami plot. Kini, ini dilakukan dengan bantuan nilai dan labels. Peratusan ditentukan secara automatik berdasarkan nilai yang dimasukkan. 🎜 🎜🎜 🎜Secara lalai, kepingan pertama carta pai bermula pada pukul 12. Anda boleh menukar sudut permulaan carta menggunakan atribut rotation, yang menerima nilai antara -360 dan 360. Nilai lalai 12 jam adalah sama dengan sudut 0. 🎜 🎜Jika anda mahu kepingan tertentu dalam carta menonjol, anda boleh menggunakan atribut pull, yang menerima nombor atau susunan nombor dengan nilai antara 0 dan 1 . Atribut pull digunakan untuk menarik sektor yang ditentukan daripada carta pai. Jarak tarik adalah sama dengan pecahan jejari pai atau donat yang lebih besar. 🎜 🎜Amat mudah untuk menukar carta pai kepada carta donat dengan menyatakan nilai atribut hole. Ia akan memotong bahagian jejari yang diberikan daripada carta pai untuk membuat carta donat. 🎜 🎜Anda boleh mengawal warna kepingan individu dalam carta pai menggunakan sifat colors yang bersarang dalam objek penanda. Anda juga boleh menukar lebar dan lebar garisan yang mengelilingi setiap sektor dengan bantuan sifat width dan color yang bersarang dalam warna objek garis. Lebar lalai garis sempadan ialah 0. Ini bermakna bahawa secara lalai tiada garisan dilukis di sekeliling sektor. 🎜 🎜Terdapat juga atribut hovertext yang boleh digunakan untuk menyediakan beberapa maklumat teks tambahan untuk setiap sektor individu. Maklumat ini akan kelihatan kepada penonton apabila mereka menuding pada sektor. Salah satu syarat untuk memaparkan teks ialah atribut hoverinfo harus mengandungi bendera teks. Anda boleh menggunakan keluarga, size dan color< bersarang dalam <code class= /code> harta untuk menetapkan warna teks di dalam atau di luar sektor carta pai "inline">insidetextfont dan outsidetextfont ialah objek masing-masing. 🎜 🎜Kod berikut menggunakan data daripada carta pai sebelumnya untuk mencipta carta donat yang menggunakan sifat lain yang baru kita pelajari. 🎜

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

Atas ialah kandungan terperinci Carta Pai dan Tolok: Membuka Kunci Interaktiviti dengan Plotly.js, Bahagian 5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!