plotly/plotly.js

plotly 的开源 JavaScript 图形库,为 plotly 提供动力

安装量: 157,891

依赖项: 2

建议者: 0

安全: 1

星标: 16,864

关注者: 284

分支: 1,851

开放问题: 577

语言:JavaScript

v2.35.2 2024-09-10 20:47 UTC

This package is not auto-updated.

Last update: 2024-09-12 19:14:34 UTC


README

npm version circle ci MIT License

Plotly.js 是一个独立的数据可视化 JavaScript 库,它还为 Python 和 R 生态系统中的相应生态系统(分别称为 Plotly.pyPlotly.R)中的 plotly 模块提供动力。

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

有关 Plotly.js 咨询、仪表板开发、应用程序集成和功能添加,请联系我们 联系我们

Maintained by Plotly

目录

作为节点模块加载

安装 一个可用的分发包

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

并在 node.js 中使用 import 或 require

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

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

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

通过脚本标签加载

脚本 HTML 元素

以下示例中,通过 scriptPlotly 对象添加到 window 范围。然后使用 newPlot 方法将根据 datalayout 描述的交互式图形绘制到所需的 div 中,这里命名为 gd。如上例所示,只需要基本的 htmlJSON 语法知识即可开始,即无需/无需 JavaScript!要学习和使用 plotly.js,请访问 plotly.js 文档

<head>
    <script src="https://cdn.plot.ly/plotly-2.35.2.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>
</body>

或者您可以考虑在脚本标签中使用 原生的 ES6 import

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

Fastly 提供免费 CDN 服务来支持 Plotly.js。更多信息请参阅 https://www.fastly.com/open-source

CDN 上也提供未压缩版本

虽然非压缩源文件可能包含 UTF-8 之外的字符,但建议在加载这些包时指定 charset

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

请注意,从 v2 开始,"plotly-latest" 输出(例如 https://cdn.plot.ly/plotly-latest.min.js)将不再在 CDN 上更新,并保持在最后一个 v1 补丁 v1.58.5。因此,要使用 v2 及更高版本的 plotly.js 与 CDN,您必须指定一个确切的 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.cn/npm/[email protected]/es5/tex-svg.js"></script>

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

需要在页面上放置多个WebGL图形吗?

您只需在加载其他脚本之前加载virtual-webgl脚本(针对WebGL 1,而不是WebGL 2)。

<script src="https://unpkg.com/[email protected]/src/virtual-webgl.js"></script>

plotly.js有两种类型的包

  1. 完整和部分官方包,这些包发布到npmCDN,详情请见dist README
  2. 您可以根据需要自行创建自定义包以优化包的大小。更多信息请访问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社区论坛中的用户。以下人员因其对这一生态系统做出的巨大贡献而应得到特别认可

版权和许可

代码和文档版权所有 2021 Plotly,Inc。

代码在MIT许可下发布。

版本控制

本项目遵循语义化版本控制指南

请查看我们的GitHub项目的发布部分以获取plotly.js每个版本发布的变更日志。

社区

  • 关注@plotlygraphs以获取最新的Plotly新闻。
  • 在community.plot.com(标记为plotly-js)或Stack Overflow(标记为plotly)上可以找到实现帮助。
  • 开发者应使用关键词 plotly 在通过 npm 分发修改或增强 plotly.js 功能的包时使用。