Chart.js入门：饼图，甜甜圈图和气泡图

气泡图"/>

Chart.js入门：饼图，甜甜圈图和气泡图

到目前为止，您已经在Chart.js中了解了四种不同的图表类型。 本系列的第二篇教程介绍折线图和条形图 。 第三个教程讨论了雷达图和极地图 。 在本教程中，您将学习如何使用Chart.js创建饼图，甜甜圈图和气泡图。

创建饼图和甜甜圈图

当您想显示某事物在不同实体之间划分的比例时，饼图和甜甜圈图非常有用。 例如，您可以使用饼图显示野生动物园中狮子的雄性，雌性和幼年狮子的百分比，或不同候选人在选举中获得的选票百分比。

饼图仅在您要比较一个特定参数或一组数据时才有用。 要记住的重要一点是，您不能使用饼图来绘制值为零的实体，因为饼图中的扇区角度取决于数据点的大小。

这意味着任何份额为零的实体都不会显示在图表上。 同样，您不能在饼图上绘制负值。 您可以通过将type键设置为pie来在Chart.js中创建pie 。 同样，你可以通过设置创建圆环图type关键doughnut 。 这是创建这两个图表的示例：

var pieChart = new Chart(votesCanvas, {type: 'pie',data: votesData,options: chartOptions
});var doughnutChart = new Chart(votesCanvas, {type: 'doughnut',data: votesData,options: chartOptions
});

让我们创建一个饼图，该饼图显示2015年排名前五位的国家的石油出口数据 。数据以十亿美元为单