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

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

跳过重叠标签

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

请参阅下面给出的代码:

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

自定义Pie Radius

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

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

请参阅下面给出的代码:

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

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

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

设置半径为百分比值

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

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

请参考下图:

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

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

请参考下图:

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

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

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

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

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

请参阅下面给出的代码:

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

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

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

标签:

声明:本站部分文章及图片源自用户投稿,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!

上一篇 2020年6月3日
下一篇 2020年6月3日

相关推荐

发表回复

登录后才能评论