前言
在前端开发中，数据可视化是一个重要的功能点。而 Highcharts 是一种常用的可视化图表库。而在开发过程中，有时候需要将 Highcharts 的图表导出为图片，以便打印或分享。此时，就可以使用 npm 包 highcharts2image 进行图表导出。
安装
使用 npm 包管理器进行安装：
npm install highcharts2image --save-dev
使用
首先需要引入 highcharts 和 highcharts2image：
<!-- 引入 highcharts -->
<script src="https://cdn.jsdelivr.net/npm/highcharts@{version}/highcharts.js"></script>
<!-- 引入 highcharts-exporting -->
<script src="https://cdn.jsdelivr.net/npm/highcharts@{version}/modules/exporting.js"></script>
<!-- 引入 highcharts2image -->
<script src="node_modules/highcharts2image/src/highcharts2image.js"></script>接着，创建一个 Highcharts 图表：
-- -------------------- ---- -------
----------------------------- -
------ -
----- --------
--
------ -
----- -------- ------- ---------
--
--------- -
----- -------- -----------------
--
------ -
----------- -
------
------
------
------
------
------
------
------
------
------
------
-----
--
---------- ----
--
------ -
---- --
------ -
----- --------- -----
-
--
------- -
-
----- --------
----- -
-----
-----
------
------
------
------
------
------
------
------
-----
----
-
--
-
----- ---- ------
----- -
-----
-----
-----
-----
------
-----
------
------
-----
-----
------
----
-
--
-
----- ---------
----- -
-----
-----
-----
-----
-----
-----
-----
-----
-----
-----
-----
----
-
--
-
----- ---------
----- -
-----
-----
-----
-----
-----
-----
-----
-----
-----
-----
-----
----
-
-
-
---最后，调用 highcharts2image 的 download 函数导出图片：
const chart = Highcharts.chart('container', {...});
Highcharts2Image.download(chart);参数
download 函数可以接受一个可选的参数对象：
filename：导出的文件名，默认为charttype：导出的图片类型，默认为image/png
示例
以下为完整的示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----- --------------- ---------------------------- -------------------
----- ---------------------------- ------------------
----------------------- ------------
---- -- ---------- ---
------- -------------------------------------------------------------------------------
---- -- -------------------- ---
------- --------------------------------------------------------------------------------------
---- -- ---------------- ---
------- ---------------------------------------------------------------------
-------
------
---- ---------------------
------- ---------------------------------- --------------
--------
----- ------------- - -- -- -
----- ----- - ----------------------------- -
------ -
----- --------
--
------ -
----- -------- ------- ---------
--
--------- -
----- -------- -----------------
--
------ -
----------- -
------
------
------
------
------
------
------
------
------
------
------
-----
--
---------- ----
--
------ -
---- --
------ -
----- --------- -----
-
--
------- -
-
----- --------
----- -
-----
-----
------
------
------
------
------
------
------
------
-----
----
-
--
-
----- ---- ------
----- -
-----
-----
-----
-----
------
-----
------
------
-----
-----
------
----
-
--
-
----- ---------
----- -
-----
-----
-----
-----
-----
-----
-----
-----
-----
-----
-----
----
-
--
-
----- ---------
----- -
-----
-----
-----
-----
-----
-----
-----
-----
-----
-----
-----
----
-
-
-
---
-------------------------------- - --------- -------- ----- ----------- ---
--
---------
-------
-------总结
通过 highcharts2image，我们可以方便地将 Highcharts 图表导出为图片。使用起来也非常简单，只需要引入模块、创建 Highcharts 图表对象，并调用 download 函数即可。高度可定制化的参数也可以满足不同的需求。这对于需要图形输出的前端开发工程师们来说，是一个非常有用的 npm 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600555a681e8991b448d2c39