在数据可视化领域，Plotly.js 是一款功能强大的工具，能够帮助开发者轻松创建各种交互式图表。在本系列的第五部分，我们将深入探讨如何使用 Plotly.js 创建饼图与仪表盘图表，进一步提升数据展示的效果。

首先来看看饼图的创建。饼图是一种非常直观的图表类型，用于展示各部分占总体的比例关系。使用 Plotly.js 创建饼图，我们需要准备好数据和布局。数据部分通常以数组形式呈现，每个元素代表饼图的一个扇形区域，包含标签和对应的值。例如：

var data = [
  {
    labels: ['苹果', '香蕉', '橙子', '其他'],
    values: [30, 25, 20, 25],
    type: 'pie'
  }
];

布局则可以自定义饼图的外观，如标题、颜色等。

var layout = {
  title: '水果销售占比',
  colors: ['#FF69B4', '#FFFF00', '#FFA500', '#808080']
};

然后通过 Plotly.newPlot 方法将数据和布局结合起来，一个精美的交互式饼图就诞生了。用户可以通过鼠标悬停查看每个扇形区域的详细信息，还能进行缩放、旋转等操作。

接下来是仪表盘图表。仪表盘图表常用于展示某个指标的进度或状态。创建仪表盘图表同样要准备数据和布局。数据部分一般定义了仪表盘的范围、当前值等信息。

var data = [
  {
    type: 'indicator',
    mode: 'gauge+number',
    value: 75,
    title: { text: '完成进度' },
    gauge: {
      axis: { range: [0, 100] },
      bar: { color: 'green' }
    }
  }
];

布局部分可以设置仪表盘的大小、颜色等样式。

var layout = {
  width: 400,
  height: 300
};

同样使用 Plotly.newPlot 方法渲染图表。用户能直观地看到指标的当前状态，并且这种交互式的仪表盘在很多场景下都能提升数据的可读性和吸引力。

通过 Plotly.js 创建饼图与仪表盘图表，为我们的数据可视化工作提供了更多的选择和灵活性。无论是展示数据占比还是指标进度，都能以直观且交互性强的方式呈现给用户，帮助我们更好地传达数据背后的信息。