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

翻译|使用教程|编辑:杨鹏连|2020-07-16 14:51:01.600|阅读 17 次

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

# 您正在找协同办公软件吗?点击这里站长给您推荐 #

相关链接:

FusionCharts Suite XT是全面的跨平台、跨浏览器JavaScript图表套包,其中包括FusionCharts XTPowerCharts XTFusionWidgets XTFusionMaps 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"
  }
}
配置了切片距离的图表如下所示:



配置斜角效果

对于饼图/甜甜圈图,您可以配置斜角效果以使用3D效果渲染图表。设置use3DLighting属性以1指定是否将使用高级渐变和阴影效果来创建外观更好的图表。


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

请参阅下面给出的代码:

{
  "chart": {
    "use3DLighting": "1",
    "radius3D": "50"
  }
}
为斜角效果配置的饼图如下所示:





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



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果

文章转载自:InfoSoft

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
FusionCharts Suite XT

全面的跨平台、跨浏览器JavaScript图表解决方案套包,拥有90+图表和900+地图

FusionCharts XT

50万用户首选的跨平台、跨浏览器的JavaScript/HTML图表解决方案

FusionWidgets XT

FusionWidgets XT操作简单,提供各种实时图表、金融图表、支持图表自动更新

PowerCharts XT

适用于专业领域的高级图表控件

FusionMaps XT

功能强大的JavaScript (HTML5)地图工具,可以根据内容、地区来展现及描绘地理数据或者其它实体。

在线
客服
咨询
电话
400-700-1020
在线
QQ
购物车 反馈 返回
顶部
在线客服系统
live chat