Highcharts 是一款流行的前端图表库，提供了各种类型的图表，包括饼图（pie chart）和环形图（donut chart）。在某些情况下，我们可能想要去除 donut chart 中间的内部饼，以便更好地突出显示外层数据。在这篇文章中，我们将介绍如何实现该功能。
方法
我们可以使用 plotOptions.pie.innerSize 属性来控制 donut chart 的内部饼大小。默认情况下，其值为 '50%'，表示内部饼占整个圆的一半大小。若我们将该属性的值设置为 '0%'，则内部饼将消失。
以下是示例代码：
-- -------------------- ---- -------
----------------------------- -
------ -
----- -----
--
------ -
----- ----------- ----- ----- ------- ----- ----
--
------------ -
---- -
---------- ----
-
--
------- --
----- ---------
------------- -----
----- --
----- ---------
-- ------
------- -----
--------- ----
-- -
----- --------- ----------
-- -----
-- -
----- ----------
-- -----
-- -
----- -------
-- ----
-- -
----- ---------
-- ----
-- -
----- --------
-- ----
--
--
---在上述代码中，我们将 innerSize 属性的值设置为 '0%'，以便去除内部饼。
深入探讨
除了去除内部饼外，我们还可以通过其他方式来调整 donut chart 的样式。以下是一些常见的技巧：
调整内部饼大小
如果您想要保留内部饼，但同时又想调整其大小，可以通过修改 plotOptions.pie.innerSize 属性的值来实现。例如，将其设置为 '30%' 可以使内部饼缩小到原来的三分之一大小。
修改边框宽度和颜色
我们可以通过 plotOptions.pie.borderWidth 和 plotOptions.pie.borderColor 属性来修改 donut chart 的边框宽度和颜色。例如：
plotOptions: {
pie: {
borderWidth: 5,
borderColor: '#fff'
}
}上述代码将边框宽度设置为 5，边框颜色设置为白色。
改变数据标签位置
默认情况下，数据标签（data label）显示在每个扇形区域的中心位置。如果您想将其移动到其他位置，可以使用 dataLabels.distance 属性。例如，将其设置为 -30 可以将数据标签移到扇形区域中心的内部。
plotOptions: {
pie: {
dataLabels: {
distance: -30
}
}
}总结
本文介绍了如何去除 Highcharts donut chart 的内部饼，以及一些其他常用的调整样式的技巧。希望本文能够对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29846