If you've been following this series since the beginning, you may have noticed that Plotly.js uses the same scatter type to create line and bubble charts. The only difference is that we have to set mode to lines when creating a line chart and markers to when creating a bubble chart mode.

Similarly, Plotly.js allows you to create pie charts, donut charts, and gauge charts by using the same value for the type property and changing the values ??of other properties depending on the chart you want to create.

Creating pie charts in Plotly.js

You can create a pie chart in Plotly.js by setting the type property to pie. There are other properties such as opacity, visible, and name that are also common to other chart types. The name attribute is used to provide the name of the current pie trace. This name is then shown in the legend for identification. You can show or hide the pie chart trace in the chart legend by setting the showlegend property to true or false respectively. You can use the labels attribute to set label names for different parts of the pie chart.

For pie charts, marker objects are used to control the appearance of different parts of the chart. The color property nested within marker can be used to set the color of each slice of the pie chart. The colors of different sectors can be specified as array values ??of the color property.

You can also set the color and width of all lines surrounding each sector using the color and width properties nested within the line object. You also have the option of sorting all slices of the pie chart from largest to smallest using the boolean sort property. Likewise, with the help of the direction property, you can change the direction of a sector to clockwise or counterclockwise .

The following code creates a basic pie chart that lists the forest area of ??the top five countries in the world.

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

As you can see, we no longer use the x and y properties to specify the points we want to plot. Now, this is done with the help of values and labels. The percentage is automatically determined based on the entered value.

By default, the first slice of the pie chart starts at 12 o'clock. You can change the starting angle of the chart using the rotation property, which accepts values ??between -360 and 360. The default 12 o'clock value is equal to angle 0.

If you want a certain slice in the chart to stand out, you can use the pull property, which accepts a number or an array of numbers with values ??between 0 and 1. pull Property is used to pull the specified sector from the pie chart. The pull distance is equal to a fraction of the larger radius of the pie or donut.

It is very easy to convert a pie chart into a donut chart by specifying the value of the hole attribute. It will cut out a given radius portion from the pie chart to make a donut chart.

You can control the colors of individual sectors in the pie chart using the colors property nested within the marker object. You can also change the width and color of the line surrounding each sector with the help of the width and color properties nested within the line object. The default width of the bounding line is 0. This means that by default no lines are drawn around the sectors.

There is also a hovertext attribute that can be used to provide some additional text information for each individual sector. This information will be visible to viewers when they hover over a sector. One of the conditions for displaying text is that the hoverinfo attribute should contain the text flag. You can set the text color inside or outside the pie chart sectors using the family, size, and color properties nested in insidetextfont and outsidetextfont are objects respectively.

The following code uses the data from the previous pie chart to create a donut chart that uses the other properties we just learned about.

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 中創(chuàng)建儀表圖表

儀表圖的基本結(jié)構(gòu)與圓環(huán)圖類似。這意味著我們可以使用一些巧妙選擇的值并通過(guò)仍然將 type 屬性設(shè)置為 pie 來(lái)創(chuàng)建簡(jiǎn)單的儀表圖表。基本上，我們將隱藏整個(gè)餅圖的某些部分，使其看起來(lái)像儀表圖。

首先，我們需要為 values 屬性選擇一些值。為了簡(jiǎn)單起見，我將使用餅圖的上半部分作為我的儀表圖。這意味著這些值應(yīng)該在我想要可見的部分和我想要隱藏的餅圖部分之間平均分配。圖表的可見部分可以進(jìn)一步分為更小的部分。以下是為儀表圖表選擇值的示例。

values: [100 / 5, 100 / 5, 100 / 5, 100 / 5, 100 / 5, 100]

上行中的數(shù)字 100 是任意的?？梢钥吹?，前五個(gè)切片加起來(lái)是100，這也是為餅圖隱藏區(qū)域設(shè)置的值。這將整個(gè)餡餅平均分為隱藏部分和可見部分。

這是創(chuàng)建基本儀表圖表的完整代碼。您應(yīng)該注意到，我已將應(yīng)隱藏的扇區(qū)的顏色屬性設(shè)置為白色。同樣，相應(yīng)扇區(qū)的 text 和 labels 值也已設(shè)置為空字符串。 rotation 屬性已設(shè)置為 90，以便圖表不會(huì)從默認(rèn)的 12 點(diǎn)鐘位置繪制。

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 變量設(shè)置的值將確定繪制針的角度。 radius 變量決定針的長(zhǎng)度。屬性 x0 和 y0 用于設(shè)置線條的起點(diǎn)。同樣，屬性 x1 和 y1 用于設(shè)置線條的終點(diǎn)。

您可以借助 SVG 路徑為針創(chuàng)建更復(fù)雜的形狀。您所要做的就是將 type 屬性設(shè)置為 path 并使用 path 屬性指定實(shí)際路徑。您可以在參考的布局形狀部分閱讀更多相關(guān)信息。

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

本節(jié)的所有代碼都會(huì)創(chuàng)建以下儀表圖表。目前，該圖表不是很奇特，但它可以作為一個(gè)很好的起點(diǎn)。

最終想法

在本教程中，您學(xué)習(xí)了如何使用 Plotly.js 中的 pie 跟蹤類型創(chuàng)建餅圖和圓環(huán)圖。您還學(xué)習(xí)了如何仔細(xì)設(shè)置一些屬性的值，以將這些餅圖轉(zhuǎn)換為簡(jiǎn)單的儀表圖。您可以在參考頁(yè)面上閱讀有關(guān)餅圖及其不同屬性的更多信息。

這是我們的交互式 Plotly.js 圖表系列的最后一個(gè)教程。第一個(gè)介紹性教程為您提供了該庫(kù)的概述。第二、第三和第四教程分別向您展示了如何創(chuàng)建折線圖、條形圖和氣泡圖。我希望您喜歡本教程以及整個(gè)系列。如果您有任何疑問(wèn)，請(qǐng)隨時(shí)在評(píng)論中告訴我。

The above is the detailed content of Pie and Gauge Charts: Unlocking Interactivity with Plotly.js, Part 5. For more information, please follow other related articles on the PHP Chinese website!