JavaScript图表工具FusionCharts入门教程(24):甜甜圈中的单片切片和智能标签

---

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最新版

启用单片切片

默认情况下，饼图和甜甜圈图允许您一次切出多个饼图/甜甜圈片。但是，您可以选择一次仅启用一个切片。
默认情况下，启用多个切片。要停止多重切片，请将enableMultiSlicing属性设置为0。

请参阅下面给出的代码：

{
  "chart": {
    "enableMultiSlicing": "0"
  }
}

启用了单切片的甜甜圈图如下所示：

禁用智能标签和行

默认情况下，饼图和甜甜圈图使用智能标签和线条呈现-智能标签是使用称为智能线的线段连接到其对应的饼图切片的数据标签。即使将大量标签放置在附近，智能标签也可以管理标签的重叠。但是，您可以选择禁用这些智能标签。
要禁用智能标签，请将enableSmartLabels属性设置为0。

请参阅下面给出的代码：

{
  "chart": {
    "enableSmartLabels": "0"
  }
}

禁用了智能标签的饼图如下所示：

如果禁用了智能标签，则在标签数量众多的情况下，标签可能会相互重叠。

自定义智能线

除了启用和禁用智能线之外，您还可以设置智能线的外观属性。要自定义智能线，请遵循以下步骤：

• 使用smartLineColor属性为智能线颜色指定十六进制代码。
• 使用smartLineThickness属性设置智能线的粗细。
• 使用smartLineAlpha属性设置智能线的透明度。此属性的值介于0（透明）和100（不透明）之间。
• 将isSmartLineSlanted属性设置0为将智能线渲染为直线。

请参考下面的代码：

{
  "chart": {
    "smartLineColor": "#ff0000",
    "smartLineThickness": "2",
    "smartLineAlpha": "100",
    "isSmartLineSlanted": "0"
  }
}

下面显示了一个value2Position属性设置为inside（在图表级别）的pie2d：

在饼图/甜甜圈图中，由于空间不足，更改值的位置有时可能会彼此重叠。 在这种情况下，引入了新的属性minAngleForValue，该属性设置饼图的最小角度，在该最小角度以下的值将不可见。

请参考下面的代码：

{
  "chart": {
    "valuePosition": "inside",
    "minAngleForValue": "75"
  }
}

具有自定义智能线的装饰特性的饼图如下所示：

配置标签距离和电气间隙

现在，您已经知道如何自定义图表中的标签和标签线。在这里，我们讨论如何配置图表的标签距离。

要配置标签距离和间隙，请按照以下步骤操作:

• 使用labelDistance属性设置标签/值与饼状/甜甜圈边缘之间的距离（以像素为单位）。
• 仅当禁用智能标签时，此属性才适用。

请参考下面的代码：

{
  "chart": {
    "enableSmartLabels": "0",
    "labelDistance": "5"
  }
}

---

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