plotly.js

Plotly.js是一个独立的JavaScript数据可视化库，它也为Python和R生态系统中名为plotly的模块提供支持（分别称为Plotly.py和Plotly.R）。

Plotly.js可用于生成数十种图表类型和可视化效果，包括统计图表、3D图形、科学图表、SVG和瓦片地图、金融图表等。

联系我们以获取Plotly.js咨询、仪表板开发、应用程序集成和功能添加服务。

作为Node模块加载

安装一个现成的分发捆绑包

npm i --save plotly.js-dist-min

在Node.js中使用import或require

// ES6模块
import Plotly from 'plotly.js-dist-min'

// CommonJS
var Plotly = require('plotly.js-dist-min')

如果你更喜欢使用未压缩的包，也可以考虑使用plotly.js-dist。

通过脚本标签加载

script HTML元素

在下面的示例中，Plotly对象通过script添加到窗口作用域。然后使用newPlot方法将由data和layout描述的交互式图形绘制到所需的div中（此处命名为gd）。如上面的示例所示，基本的html和JSON语法知识就足以开始使用，即使不懂JavaScript也可以！要了解更多并使用plotly.js构建更多内容，请访问plotly.js文档。

<head>
    <script src="https://cdn.plot.ly/plotly-2.34.0.min.js" charset="utf-8"></script>
</head>
<body>
    <div id="gd"></div>

    <script>
        Plotly.newPlot("gd", /* JSON对象 */ {
            "data": [{ "y": [1, 2, 3] }],
            "layout": { "width": 600, "height": 400}
        })
    </script>
</body>

或者，你可以考虑在script标签中使用原生ES6 import。

<script type="module">
    import "https://cdn.plot.ly/plotly-2.34.0.min.js"
    Plotly.newPlot("gd", [{ y: [1, 2, 3] }])
</script>

Fastly为Plotly.js提供免费的CDN服务。详情请访问https://www.fastly.com/open-source。

CDN上也提供未压缩版本

虽然未压缩的源文件可能包含UTF-8以外的字符，但建议在加载这些捆绑包时指定charset。

<script src="https://cdn.plot.ly/plotly-2.34.0.js" charset="utf-8"></script>

请注意，从v2开始，"plotly-latest"输出（例如https://cdn.plot.ly/plotly-latest.min.js）将不再在CDN上更新，并将保持在最后的v1补丁版本v1.58.5。因此，要在CDN上使用plotly.js v2及更高版本，你必须指定一个确切的plotly.js版本。

MathJax

你可以加载MathJax文件的版本二或版本三，例如：

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_SVG.js"></script>

<script src="https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/tex-svg.js"></script>

使用MathJax版本3时，除了为plotly图形使用svg输出外，还可以在页面的其他部分使用chtml输出。请参考devtools/test_dashboard/index-mathjax3chtml.html查看示例。

需要在一个页面上有多个WebGL图形吗？

你可以在加载其他脚本之前简单地为WebGL 1（不是WebGL 2）加载virtual-webgl脚本。

<script src="https://unpkg.com/virtual-webgl@1.0.6/src/virtual-webgl.js"></script>

捆绑包

plotly.js有两种捆绑包：

完整和部分官方捆绑包，分发到npm和CDN，详见dist README。
你可以自己创建自定义捆绑包，根据需求优化捆绑包大小。更多信息请访问CUSTOM_BUNDLE。

加载和构建plotly.js的其他方式

如果你的库需要以官方或自定义捆绑包以外的方式捆绑或直接加载plotly.js/lib/index.js或其部分模块（类似于index-basic），或者你想调整默认构建配置，请访问BUILDING.md。

文档

官方plotly.js文档托管在https://plotly.com/javascript。

这些页面由Plotly的graphing-library-docs仓库生成，使用Jekyll构建并公开托管在GitHub Pages上。有关为Plotly文档做贡献的更多信息，请阅读贡献指南。

错误和功能请求

发现bug或有功能请求？请遵循问题指南，在Github上提出问题。您可能还想了解Plotly.js的变更如何进行。

贡献

请阅读我们的贡献指南。其中包括提出问题、在项目中使用plotly.js以及开发注意事项的说明。

杰出贡献者

Plotly.js是一个庞大而充满活力的生态系统的核心，有许多贡献者提出问题、复现bug、建议改进、为本仓库（以及其他上游或下游仓库）编写代码，并在Plotly社区论坛中帮助用户。以下人员因其对这个生态系统的卓越贡献而值得特别表彰：

	GitHub	Twitter	状态
Alex C. Johnson	@alexcjohnson		活跃，维护者
Mojtaba Samimi	@archmoj	@solarchvision	活跃，维护者
Emily Kellison-Linn	@emilykl		活跃，维护者
My-Tien Nguyen	@my-tien		活跃，社区贡献者
Étienne Tétreault-Pinard	@etpinard	@etpinard	名人堂
Antoine Roy-Gobeil	@antoinerg		名人堂
Jack Parmer	@jackparmer		名人堂
Nicolas Kruchten	@nicolaskruchten	@nicolaskruchten	名人堂
Mikola Lysenko	@mikolalysenko	@MikolaLysenko	名人堂
Ricky Reusser	@rreusser	@rickyreusser	名人堂
Dmitry Yv.	@dy	@DimaYv	名人堂
Jon Mease	@jonmmease	@jonmmease	名人堂
Robert Monfera	@monfera	@monfera	名人堂
Robert Möstl	@rmoestl	@rmoestl	名人堂
Nicolas Riesco	@n-riesco		名人堂
Miklós Tusz	@mdtusz	@mdtusz	名人堂
Chelsea Douglas	@cldougl		名人堂
Ben Postlethwaite	@bpostlethwaite		名人堂
Hannah Ker	@hannahker	@hannahker11	名人堂
Chris Parmer	@chriddyp		名人堂
Alex Vados	@alexander-daniel		名人堂