JavaScript图表工具FusionCharts入门教程(25):饼图和甜甜圈图（二）

---

FusionCharts Suite XT是全面的跨平台、跨浏览器JavaScript图表套包，其中包括FusionCharts XT、PowerCharts XT 、FusionWidgets XT 、FusionMaps XT。支持 ASP、 ASP.NET、 PHP、 JSP、 ColdFusion、 Ruby on Rails、 JavaScript、甚至简单的HTML页面。它是你值得信赖的JavaScript图表解决方案，目前在全球有45万用户选择Fusioncharts来制作专业的JavaScript图表。

点击下载FusionCharts最新版

跳过重叠标签

饼图/甜甜圈图中的标签过多时（即使使用智能标签也很难调整），标签可能会重叠。在这种情况下，您可以选择跳过重叠的标签。最不重要的馅饼的标签将被删除。要跳过标签的重叠，请将skipOverlapLabels属性设置为1。

请参阅下面给出的代码：

{
  "chart": {
    "skipOverlapLabels": "1"
  }
}

自定义Pie Radius

默认情况下，对于饼图/甜甜圈图，该图会根据提供的数据自动计算最合适的饼图半径。但是，您可以选择显式设置饼图的外半径。使用pieRadius属性指定饼图/甜甜圈图的外半径。

从v3.14.0开始，您可以百分比和像素值形式指定饼图/甜甜圈图的半径。

请参阅下面给出的代码：

{
  "chart": {
    "pieRadius": "50"
  }
}

自定义外径的饼图如下所示：

设置半径为百分比值

现在，您已经知道如何自定义饼图/甜甜圈图的半径。在这里，我们讨论如何使用百分比值配置饼图/甜甜圈图的半径。

您可以通过设置pieRadius属性的值来以百分比形式设置饼图的半径。当您设置pieRadius百分比值时，饼图的半径是相对于图表画布空间计算的。

请参考下图：

在甜甜圈图中，可以应用该pieRadius属性来设置甜甜圈图的上限阈值的半径。

请参考下图：

要自定义甜甜圈图的内半径，请doughnutRadius以百分比设置属性值。
请参考下图：

在上图中，doughnutRadius设置为80％，并且您可以看到，相对于甜甜圈图的上限，已计算出半径的百分比。

从v3.14.0开始，您可以百分比和像素值形式指定饼图/甜甜圈图的半径。

请参阅下面给出的代码：

{
  "chart": {
    "pieRadius": "90",
    "doughnutRadius": "80"
  }
}

---

想要购买FusionCharts Suite XT正版授权，或了解更多产品信息请点击