如果您从一开始就关注本系列，您可能已经注意到 Plotly.js 使用相同的 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);

本文地址：http://iyjjz.cn