彩票走势图

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

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

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

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

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正版授权,或了解更多产品信息请点击


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP