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

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

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

设置起始角度

默认情况下，饼图/甜甜圈图从0°角开始绘制。该图表允许您显式设置起始角度。指定startingAngle属性设置饼图/甜甜圈图的起始角度。第一个饼图切片将从此属性中指定的角度度量开始绘制。

请参阅下面给出的代码：

{  "chart": {    "startingAngle": "45"  }}

起始角设置为45°的饼图如下所示：

切片馅饼/甜甜圈

默认情况下，当饼图/甜甜圈图首次呈现时，将切入所有切片。但是，要突出显示一个切片，您可能希望在图表首次加载时将其切成薄片。isSliced属性可用于指定饼图将被切成一切片的形式呈现。将该属性设置1为饼图切片，以呈现切出的切片。此属性属于data对象。
请参阅下面给出的代码：

{  "data": {    "label": "Household",    "value": "49100",    "isSliced": "1"}

一片切成薄片的饼图如下所示：

配置切片距离

切出馅饼/甜甜圈切片时，您可以配置中心和切出的切片之间的距离。使用slicingDistance属性设置图表中心和切出的切片之间的距离（以像素为单位）。

请参阅下面给出的代码：

{  "chart": {    "slicingDistance": "10"  }}

配置了切片距离的图表如下所示：

使用radius3D属性设置图表的3D半径。在3D照明模式下绘制图表时，使用此属性可以以百分比形式设置半径。从根本上说，它有助于设置馅饼/甜甜圈的斜角距离。

请参阅下面给出的代码：

{  "chart": {    "use3DLighting": "1",    "radius3D": "50"  }}

为斜角效果配置的饼图如下所示：

想要购买FusionCharts Suite XT正版授权，或了解更多产品信息请点击【咨询在线客服】

标签：