专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

为何 Plotly.js 能成为前端可视化顶流?

ins518 2024-09-30 21:17:07 技术文章 11 ℃ 0 评论

大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！

什么是 Plotly.js

Plotly.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 module
import Plotly from 'plotly.js-dist-min'
// CommonJS
var 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/

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表