如何在网页中通过 CDN 加载 plotly.js 并渲染第一个交互图表【免费下载链接】plotly.jsOpen-source JavaScript charting library behind Plotly and Dash项目地址: https://gitcode.com/GitHub_Trending/pl/plotly.js如果你的目标是在网页里直接显示一张可交互的图表而不需要搭建 Node 工程或打包工具plotly.js 官方提供了 CDN 加载方式通过一个script标签引入cdn.plot.ly上的压缩版文件再调用全局的Plotly.newPlot方法就能把由data和layout描述的图表绘制到页面上指定的div中。本仓库当前版本为 4.0.0下文所有 CDN 地址均使用 README.md 中给出的 4.0.0 版本地址。按 README.md 的说明只需基本的 HTML 和 JSON 语法即可完成入门不强制要求先会写 JavaScript。完整 HTML 示例加载 CDN 并绘制图表以下是 README.md 中「Load via script tag」一节给出的示例可以整段保存为一个.html文件直接用浏览器打开head script srchttps://cdn.plot.ly/plotly-4.0.0.min.js charsetutf-8/script /head body div idgd/div script Plotly.newPlot(gd, /* JSON object */ { data: [{ y: [1, 2, 3] }], layout: { width: 600, height: 400} }) /script /body各部分的作用script srchttps://cdn.plot.ly/plotly-4.0.0.min.js加载压缩版主包加载完成后全局对象Plotly被注入window作用域dist/README.md 说明所有 plotly.js bundle 都会注入全局Plotly对象。div idgd/div是图表的挂载容器。Plotly.newPlot(gd, ...)的第一个参数是容器 idplot_api.js 中newPlot(gd, data, layout, config)的实现会先通过Lib.getGraphDiv(gd)解析这个div后面的 JSON 对象按data要画的数据这里是一条y为[1, 2, 3]的默认 scatter 线和layout布局这里指定 600×400 的宽高两个键描述图表。charsetutf-8在文档中被明确标注为需要保留的参数。浏览器打开该文件后预期看到一张 600×400 的图表数据点为 1、2、3由于是默认 scatter 类型呈现为折线并带有数据点标记。悬停、缩放等交互由库自带无需额外代码。可选替代方式以下两种方式都来自 README.md按需选用不影响主路径。用原生 ES6 import 加载如果不希望依赖script标签注入全局变量README 给出了typemodule的写法script typemodule import https://cdn.plot.ly/plotly-4.0.0.min.js Plotly.newPlot(gd, [{ y: [1, 2, 3] }]) /script注意这里newPlot的第二个参数直接传了一个 trace 数组[{ y: [1, 2, 3] }]与上一节「{data, layout}对象」的写法是等价的两种调用形式。加载非压缩版用于调试非压缩版也发布在同一个 CDN 上文档提醒非压缩源文件可能包含 UTF-8 之外的字符所以加载时建议保留charsetscript srchttps://cdn.plot.ly/plotly-4.0.0.js charsetutf-8/scriptCDN 服务由 Fastly 免费支撑README 说明。版本选择的关键限制从 v2 起https://cdn.plot.ly/plotly-latest.min.js这类 plotly-latest 地址不再更新停留在 v1 的最后一个补丁版本 v1.58.5。因此要在 CDN 上使用 plotly.js v2 及更高版本必须指定精确版本号如本文章使用的plotly-4.0.0.min.js。4.0.0 的完整包与全部 partial bundle 的 CDN 地址清单见 dist/README.md例如basic部分包仅含bar、pie、scatter三个 trace 模块minified gzip 后 397 kB对应https://cdn.plot.ly/plotly-basic-4.0.0.min.js适合只需要少数图类型的页面。完整包体积dist/README.md 给出的统计数据原始 9.65 MBminified 4.29 MBminified gzip 1.33 MB。如果页面加载时间敏感这是选择 partial bundle 的依据。图表内渲染数学公式可选MathJaxplotly.js 支持 MathJax v3 或 v4 渲染公式但 MathJax不包含在 plotly.js bundle 中需要单独加载脚本。MathJax 就绪后标题、轴标签、刻度文本和注释中任何$..$包裹的字符串都会按 MathJax 引擎渲染!-- MathJax v4 -- script srchttps://cdn.jsdelivr.net/npm/mathjax4.1.3/tex-svg.js/script!-- MathJax v3 -- script srchttps://cdn.jsdelivr.net/npm/mathjax3.2.2/es5/tex-svg.js/script页面需要同时存在多个 WebGL 图表时仅 WebGL 1、不支持 WebGL 2可在加载其他脚本之前引入 virtual-webglscript srchttps://unpkg.com/virtual-webgl1.0.6/src/virtual-webgl.js/script以上均为 README.md 中明确给出的分支场景默认入门路径不需要。结果验证与后续入口验证方式很简单浏览器打开该 HTML 文件后idgd的div内出现 600×400 的可交互图表即加载成功若页面上出现Plotly未定义的报错通常是 CDN 脚本标签未生效或被 CSP 拦截可先检查script是否被网络策略允许。图表显示正常后下一步可以查看dist/README.md完整包与 partial bundle 的 CDN 地址、npm 包与体积统计以及加载 locale 文件如plotly-locale-de-ch.js配合Plotly.setPlotConfig({locale: de-CH})的方法BUILDING.md如果你后续需要直接引用 lib/index.js 或自行调整构建配置而不是使用官方 bundleCUSTOM_BUNDLE.md按自己的需求裁剪自定义 bundle 以减小体积。【免费下载链接】plotly.jsOpen-source JavaScript charting library behind Plotly and Dash项目地址: https://gitcode.com/GitHub_Trending/pl/plotly.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 如何在网页中通过 CDN 加载 plotly.js 并渲染第一个交互图表
如何在网页中通过 CDN 加载 plotly.js 并渲染第一个交互图表【免费下载链接】plotly.jsOpen-source JavaScript charting library behind Plotly and Dash项目地址: https://gitcode.com/GitHub_Trending/pl/plotly.js如果你的目标是在网页里直接显示一张可交互的图表而不需要搭建 Node 工程或打包工具plotly.js 官方提供了 CDN 加载方式通过一个script标签引入cdn.plot.ly上的压缩版文件再调用全局的Plotly.newPlot方法就能把由data和layout描述的图表绘制到页面上指定的div中。本仓库当前版本为 4.0.0下文所有 CDN 地址均使用 README.md 中给出的 4.0.0 版本地址。按 README.md 的说明只需基本的 HTML 和 JSON 语法即可完成入门不强制要求先会写 JavaScript。完整 HTML 示例加载 CDN 并绘制图表以下是 README.md 中「Load via script tag」一节给出的示例可以整段保存为一个.html文件直接用浏览器打开head script srchttps://cdn.plot.ly/plotly-4.0.0.min.js charsetutf-8/script /head body div idgd/div script Plotly.newPlot(gd, /* JSON object */ { data: [{ y: [1, 2, 3] }], layout: { width: 600, height: 400} }) /script /body各部分的作用script srchttps://cdn.plot.ly/plotly-4.0.0.min.js加载压缩版主包加载完成后全局对象Plotly被注入window作用域dist/README.md 说明所有 plotly.js bundle 都会注入全局Plotly对象。div idgd/div是图表的挂载容器。Plotly.newPlot(gd, ...)的第一个参数是容器 idplot_api.js 中newPlot(gd, data, layout, config)的实现会先通过Lib.getGraphDiv(gd)解析这个div后面的 JSON 对象按data要画的数据这里是一条y为[1, 2, 3]的默认 scatter 线和layout布局这里指定 600×400 的宽高两个键描述图表。charsetutf-8在文档中被明确标注为需要保留的参数。浏览器打开该文件后预期看到一张 600×400 的图表数据点为 1、2、3由于是默认 scatter 类型呈现为折线并带有数据点标记。悬停、缩放等交互由库自带无需额外代码。可选替代方式以下两种方式都来自 README.md按需选用不影响主路径。用原生 ES6 import 加载如果不希望依赖script标签注入全局变量README 给出了typemodule的写法script typemodule import https://cdn.plot.ly/plotly-4.0.0.min.js Plotly.newPlot(gd, [{ y: [1, 2, 3] }]) /script注意这里newPlot的第二个参数直接传了一个 trace 数组[{ y: [1, 2, 3] }]与上一节「{data, layout}对象」的写法是等价的两种调用形式。加载非压缩版用于调试非压缩版也发布在同一个 CDN 上文档提醒非压缩源文件可能包含 UTF-8 之外的字符所以加载时建议保留charsetscript srchttps://cdn.plot.ly/plotly-4.0.0.js charsetutf-8/scriptCDN 服务由 Fastly 免费支撑README 说明。版本选择的关键限制从 v2 起https://cdn.plot.ly/plotly-latest.min.js这类 plotly-latest 地址不再更新停留在 v1 的最后一个补丁版本 v1.58.5。因此要在 CDN 上使用 plotly.js v2 及更高版本必须指定精确版本号如本文章使用的plotly-4.0.0.min.js。4.0.0 的完整包与全部 partial bundle 的 CDN 地址清单见 dist/README.md例如basic部分包仅含bar、pie、scatter三个 trace 模块minified gzip 后 397 kB对应https://cdn.plot.ly/plotly-basic-4.0.0.min.js适合只需要少数图类型的页面。完整包体积dist/README.md 给出的统计数据原始 9.65 MBminified 4.29 MBminified gzip 1.33 MB。如果页面加载时间敏感这是选择 partial bundle 的依据。图表内渲染数学公式可选MathJaxplotly.js 支持 MathJax v3 或 v4 渲染公式但 MathJax不包含在 plotly.js bundle 中需要单独加载脚本。MathJax 就绪后标题、轴标签、刻度文本和注释中任何$..$包裹的字符串都会按 MathJax 引擎渲染!-- MathJax v4 -- script srchttps://cdn.jsdelivr.net/npm/mathjax4.1.3/tex-svg.js/script!-- MathJax v3 -- script srchttps://cdn.jsdelivr.net/npm/mathjax3.2.2/es5/tex-svg.js/script页面需要同时存在多个 WebGL 图表时仅 WebGL 1、不支持 WebGL 2可在加载其他脚本之前引入 virtual-webglscript srchttps://unpkg.com/virtual-webgl1.0.6/src/virtual-webgl.js/script以上均为 README.md 中明确给出的分支场景默认入门路径不需要。结果验证与后续入口验证方式很简单浏览器打开该 HTML 文件后idgd的div内出现 600×400 的可交互图表即加载成功若页面上出现Plotly未定义的报错通常是 CDN 脚本标签未生效或被 CSP 拦截可先检查script是否被网络策略允许。图表显示正常后下一步可以查看dist/README.md完整包与 partial bundle 的 CDN 地址、npm 包与体积统计以及加载 locale 文件如plotly-locale-de-ch.js配合Plotly.setPlotConfig({locale: de-CH})的方法BUILDING.md如果你后续需要直接引用 lib/index.js 或自行调整构建配置而不是使用官方 bundleCUSTOM_BUNDLE.md按自己的需求裁剪自定义 bundle 以减小体积。【免费下载链接】plotly.jsOpen-source JavaScript charting library behind Plotly and Dash项目地址: https://gitcode.com/GitHub_Trending/pl/plotly.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考