大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！
什么是 Plotly.jsPlotly.js is a standalone Javascript data visualization library, and it also powers the Python and R modules named plotly in those respective ecosystems
Plotly.js 是一个独立的 Javascript 数据可视化库，其构建于 d3.js 和 stack.gl 之上，是一个高级声明性图表库。plotly.js 附带 40 多种图表类型，包括 3D 图表、统计图表和 SVG 地图，同时还为名为 plotly 的 Python 和 R 模块提供支持（称为 Plotly.py 和 Plotly.R）。
目前 Plotly.js 在 Github 通过 MIT 协议开源，有超过 17k 的 star、2k 的 fork、妥妥的前端优质开源项目。
如何使用 Plotly.js首先需要安装特定依赖：
npm i --save plotly.js-dist-min然后可以按照 cjs 和 esm 的格式导入：
// ES6 moduleimport Plotly from 'plotly.js-dist-min'// CommonJSvar Plotly = require('plotly.js-dist-min')当然，开发者还可以使用 CDN 资源：
<script src="https://cdn.plot.ly/plotly-2.33.0.js" charset="utf-8"></script>CDN 上也提供了未压缩的版本 虽然未压缩的源文件可能包含 UTF-8 之外的字符，但建议开发者在加载这些包时指定字符集。
<script src="https://cdn.plot.ly/plotly-2.33.0.js" charset="utf-8"></script>Plotly.js的使用也非常简单，比如以下示例中，Plotly 对象通过脚本被添加到 window 作用域。然后使用 newPlot 方法将数据和布局描述的交互式图形绘制到此处名为 gd 的所需 div 中。
<head> <script src="https://cdn.plot.ly/plotly-2.33.0.min.js" charset="utf-8"></script></head><body> <div id="gd"></div> <script> Plotly.newPlot("gd", /* JSON object */ { "data": [{"y": [1, 2, 3] }], "layout": {"width": 600, "height": 400} }) </script>当然，开发者还可以考虑在 script 标签中使用原生 ES6 导入：
<script type="module"> import "https://cdn.plot.ly/plotly-2.33.0.min.js" Plotly.newPlot("gd", [{ y: [1, 2, 3] }])</script>更多关于 Plotly.js 的用法和参考示例可以阅读文末资料，本文不再过多展开。
参考资料https://github.com/plotly/plotly.js
https://plotly.com/javascript/
https://plotly.com/javascript/3d-charts/
