彩票走势图

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

翻译|使用教程|编辑:杨鹏连|2020-07-06 17:54:47.280|阅读 166 次

概述:从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最新版

跳过重叠标签

饼图/甜甜圈图中的标签过多时(即使使用智能标签也很难调整),标签可能会重叠。在这种情况下,您可以选择跳过重叠的标签。最不重要的馅饼的标签将被删除。要跳过标签的重叠,请将skipOverlapLabels属性设置为1。

请参阅下面给出的代码:

{
  "chart": {
    "skipOverlapLabels": "1"
  }
}

自定义Pie Radius

默认情况下,对于饼图/甜甜圈图,该图会根据提供的数据自动计算最合适的饼图半径。但是,您可以选择显式设置饼图的外半径。使用pieRadius属性指定饼图/甜甜圈图的外半径。

从v3.14.0开始,您可以百分比和像素值形式指定饼图/甜甜圈图的半径。

请参阅下面给出的代码:

{
  "chart": {
    "pieRadius": "50"
  }
}

自定义外径的饼图如下所示:

设置半径为百分比值

现在,您已经知道如何自定义饼图/甜甜圈图的半径。在这里,我们讨论如何使用百分比值配置饼图/甜甜圈图的半径。

您可以通过设置pieRadius属性的值来以百分比形式设置饼图的半径。当您设置pieRadius百分比值时,饼图的半径是相对于图表画布空间计算的。

请参考下图:


在甜甜圈图中,可以应用该pieRadius属性来设置甜甜圈图的上限阈值的半径。

请参考下图:


要自定义甜甜圈图的内半径,请doughnutRadius以百分比设置属性值。
请参考下图:

在上图中,doughnutRadius设置为80%,并且您可以看到,相对于甜甜圈图的上限,已计算出半径的百分比。

从v3.14.0开始,您可以百分比和像素值形式指定饼图/甜甜圈图的半径。

请参阅下面给出的代码:

{
  "chart": {
    "pieRadius": "90",
    "doughnutRadius": "80"
  }
}

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


标签:

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

文章转载自:

为你推荐

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

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

FusionCharts XT

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

FusionWidgets XT

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

PowerCharts XT

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

FusionMaps XT

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

扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP