JavaScript图表工具FusionCharts入门教程（23）：将值、标签放置在饼图/甜甜圈图中

---

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

配置动画方向

默认情况下，当第一次加载或刷新饼图/甜甜圈图时，渲染动画沿逆时针方向。但是，FusionCharts包含animateClockwise可用于按顺时针方向对图表进行动画处理的属性。将animateClockwise属性设置为1，以顺时针方向为图表设置动画。

请参阅下面给出的代码：

{
  "chart": {
    "animateClockwise": "1"
  }
}

下面显示了配置为沿顺时针方向进行动画处理的饼图。

显示百分比值和实际值

默认情况下，对于饼图，实际数据值显示在图表以及工具提示中。但是，您可以选择在图表上显示百分比值，同时在工具提示中保留实际值。

要在图表中显示百分比值和实际值，请执行以下步骤：

• 将showPercentValues属性设置为1将百分比值显示为数据标签。
• 将showPercentInTooltip属性设置为1以百分比值呈现工具提示的文本。

如果要在图表上显示百分比值，并在甜甜圈图的工具提示中显示实际值，则可以使用showPercentValues和showPercentInTooltip属性。

请参阅下面给出的代码：

{
  "chart": {
    "showPercentValues": "1",
    "showPercentInTooltip": "0"
  }
}

配置为在图表上显示百分比值的pie2D图表如下所示：

饼图/圆环图内的位值

从v3.14.0开始，FusionCharts Suite XT允许您将值分别放置在饼图和甜甜圈图的饼图/甜甜圈切片内。这将有助于节省总体外观，因为它将画布区域保存在图表之外。

您可以通过将新添加的属性valuePosition的值设置为inside来将值放置在切片中。 valuePosition属性的默认值为outside。

valuePosition 属性只能应用于2D图表，即pie2d和oughnut2d图表。

请参考下面的代码：

{
  "chart": {
    "valuePosition": "inside"
  }
}

valuePosition属性可以同时应用于chart和data级别，即，您可以设置切片的各个值的位置。

请参阅下面的代码，显示特定值的valuePosition属性：

{
    "chart": {
        ...
    },
    "data": [{
            "label": "Food",
            "value": "285040"
        },
        {
            "label": "Apparels",
            "value": "146330",
            "valuePosition": "inside"
        },
        {
            "label": "Electronics",
            "value": "105070"
        },
        {
            "label": "Household",
            "value": "49100"
        }
    ]
}

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

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

请参考下面的代码：

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

仅当valuePosition属性设置为inside时，此属性才起作用。

应用valuePosition和minAngleForValue属性后的甜甜圈图如下所示：

将标签放在饼图/圆环图内

现在，您已经自定义了饼图/甜甜圈图的值的位置，让我们看看如何将标签分别放置在饼图和甜甜圈图的饼图/甜甜圈切片中。

通过将labelPosition属性的值设置为inside****，可以将标签放置在切片内。labelPosition属性的默认值为outside。

labelPosition 属性只能应用于2D图表，即pie2d和oughnut2d图表。

请参考下面的代码：

{
  "chart": {
    "labelPosition": "inside"
  }
}

labelPosition属性可以同时应用于chart和data级别，即，您可以设置切片的各个标签的位置。

请参考下面的代码，其中显示labelPosition了特定值的属性：

{
    "chart": {
        ...
    },
    "data": [{
            "label": "Food",
            "value": "285040"
        },
        {
            "label": "Apparels",
            "value": "146330",
            "labelPosition": "inside"
        },
        {
            "label": "Electronics",
            "value": "105070"
        },
        {
            "label": "Household",
            "value": "49100"
        }
    ]
}

带有labelPosition属性设置为inside（在图表级别）的pie2d如下所示：

在饼图/甜甜圈图中，由于空间不足，有时更改标签的位置可能会彼此重叠。 对于这种情况，引入了新属性minAngleForLabel，该属性设置最小比例角度以呈现饼图/甜甜圈图的标签。

请参考下面的代码：

{
  "chart": {
    "labelPosition": "inside",
    "minAngleForLabel": "75"
  }
}

仅当valuePosition属性设置为inside时，此属性才起作用。

应用labelPosition和minAngleForLabel属性后的甜甜圈图如下所示：

自定义甜甜圈图的中心标签

对于甜甜圈图，您可以配置将在中心标签上呈现的默认文本。您还可以配置将鼠标指针悬停在甜甜圈片之一上时将在中心标签上呈现的文本。

要自定义图表的中心标签，请按照以下步骤操作：

• 使用defaultCenterLabel属性指定中心标签的文本。
• 使用centerLabel属性指定甜甜圈切片的悬停文本。

请参阅下面给出的代码：

{
  "chart": {
    "defaultCenterLabel": "Total revenue: $60K",
    "centerLabel": "$value"
  }
}

带有自定义中心标签的甜甜圈图如下所示：

---

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