HighCharts 是一款流行的 JavaScript 图表库，它支持多种类型的图表，包括饼图。然而，默认情况下，HighCharts 绘制的饼图只会占据容器的一部分。本文将介绍如何让 HighCharts 绘制的饼图占据整个容器，以及相关的技术细节和实现方法。
引入 HighCharts
首先，需要在 HTML 文件中引入 HighCharts 库和相应的主题文件。可以通过以下方式来获取 HighCharts：
<script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script>
上述代码将会加载 HighCharts 库和一个导出模块，使得用户可以导出生成的图表。当然，还有许多其他的模块可以被加载，这取决于具体的需求。
准备容器
为了让饼图占据整个容器，我们需要创建一个 div 元素作为容器，并设置它的高度和宽度。可以使用以下样式来设置容器的高度和宽度：
#container {
height: 100%;
width: 100%;
}在 HTML 中创建一个带有 id="container" 的 div 元素，并将其设置为全屏大小：
<div id="container" style="height:100vh;width:100vw"></div>
绘制饼图
接下来，需要在 JavaScript 中使用 HighCharts 绘制饼图。
-- -------------------- ---- -------
----------------------------- -
------ -
-------------------- -----
---------------- -----
----------- ------
----- -----
--
------ -
----- -------- ------ ------ -- -------- -----
--
-------- -
------------ --------------- -------------------------------
--
-------------- -
------ -
------------ ---
-
--
------------ -
---- -
----------------- -----
------- ----------
----------- -
-------- -----
------- --------------------- ---------------------- --
-
-
--
------- --
----- ---------
------------- -----
----- --
----- ---------
-- ------
------- -----
--------- ----
-- -
----- --------- ----------
-- -----
-- -
----- ----------
-- -----
--
--
---这段代码将会在 id="container" 的 div 元素中绘制一个饼图。注意，plotOptions.pie.size 设置为 '100%'，它是实现让饼图占据整个容器的关键所在。
-- -------------------- ---- -------
------------ -
---- -
----- -------
----------------- -----
------- ----------
----------- -
-------- -----
------- --------------------- ---------------------- --
-
-
--总结
本文介绍了如何在 HighCharts 中创建一个占据整个容器的饼图。需要注意的是，要将 plotOptions.pie.size 设置为 '100%' 才能实现这一效果。
代码示例：https://codepen.io/ChatGPT/pen/pBZmxO
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28514