使用Plotly.js创建交互式图表，第1部分：入门

>在标题为“从Chart.js开始”的系列中，您学习了如何使用Chart.js轻松创建基于响应帆布的图表。该系列涵盖了图书馆提供的七种基本图表类型。但是，您可能需要创建具有其他功能的更复杂的图表，以使这些图表交互式。

是最佳的免费使用库之一，以创建各种响应式，交互式和功能丰富的图表。在本系列中，您将学习如何使用plotly.js创建不同的图表，包括线图，条形图，气泡图表和点图表。这是一个建立在D3.js和stack.gl之上的高级声明库。以下是使绘图成为最佳JavaScript图表库之一的功能的列表：

您可以使用Plotly.js轻松创建交互式图表。您使用库创建的任何图表都配备了缩放，放大，平盘，自动缩放等功能。当您想研究具有大量绘制点的图表时，这些功能非常有用。所有这些事件均在API中公开，因此您可以在触发这些事件的任何一个时编写自定义代码以执行自己的操作。

高性能在绘制大量点时高性能使Plotly.js成为一个不错的选择。由于大多数图表都是使用SVG创建的，因此您可以在浏览器之间获得相当数量的兼容性，并且能够导出任何图表的高质量图像。但是，在DOM中绘制大量的SVG元素可能会对性能产生不利影响。该库使用stack.gl创建高性能的2D和3D图表。

>
• >
• 您创建的任何3D图表都在WebGL的帮助下渲染，以充分利用GPU所提供的所有功能。
>

在开始使用plotly.js之前，安装plotly

，我们需要先安装它。通过运行以下命令：

>此选项可能是最优雅，最灵活的，可以使用许多不同的方法来安装库。但是，您将需要设置一个捆绑器，该捆绑器会自动将您使用的NPM软件包转换为浏览器可以处理的东西。此外，为了实际使用该软件包，您可能要使用ESM。您可以在此处阅读有关ESM的更多信息。

如果您想要快速的原型解决方案，也可以使用plotly.js cdn并直接链接到库：>在撰写本教程时，

npm install plotly.js<br>

>最新版本的库为2.14.0。缩小和压缩库后的文件大小为1.1 MB。非固定和未压缩版的大小为3.5 MB。如您所见，该库提供的一长串功能是价格。有七个不同的捆绑包：基本，笛卡尔，GEO，GL3D，GL2D，MAPBOX，FINALANCE和CRIGTH。您可以使用以下行获取这些捆绑包的CDN链接：

>另外，如果使用npm，则可以安装该捆绑包的软件包。

<script type="text/javascript" src="https://cdn.plot.ly/plotly-2.14.0.min.js"></script><br>

>

>

https://cdn.plot.ly/plotly-bundleName-2.14.0.min.js<br><br>// Therefore the basic bundle becomes:<br>https://cdn.plot.ly/plotly-basic-2.14.0.min.js<br><br>// and the cartesian bundle becomes:<br>https://cdn.plot.ly/plotly-cartesian-2.14.0.min.js<br>

，如果您只需要从单个捆绑包中绘制图表，则可以使用此方法来大大减少文件大小。这是有关每个信息的一些其他信息。

• basic ：此捆绑包包含直方图2D ，pie ，ctastternary 跟踪模块。该捆绑包的压缩和缩小版本的大小为238.2 kb。
• geo
：此捆绑包允许您在JavaScript中创建不同类型的MAP相关图表。 The compressed and minified version of this bundle has a size of 224.1 kB.
• gl3dscatter: This bundle allows you to create different types of 3D maps using the scatter<code>scatter3d, scatter3d<code>surface, surface<code>mesh3d, and mesh3d
trace modules.该捆绑包的压缩和升级版本的大小为354 kb。
• scatterscatterglpointcloud gl2d heatmapgl：此捆绑包包含 scatse <code>contourgl， stactgl <code>parcoords， pointcloud <codef> code> code> heatmapggl <code> heatmapggl <code> code code code 模块。它的尺寸为362.9 kb，缩小和压缩后。
• scattermapbox scattermapbox：此捆绑包包含 scatse> scatse
和 scate> scattermapbox<li>trace模块。在这种情况下，文件大小为328.6 kb。<strong></strong><code>scatterbarhistogram finance pie：财务捆绑包可用于创建时间序列，烛台和其他图表类型来绘制财务数据。该模块由 scatter<code>ohlc， bar <code>candlestick，直方图 ， pie <li>，<code> ohlc <strong>和<code> candlestick 跟踪模块。

strict strict div strict strict

：严格的bundle bundle waster bundle waster ands unders conuctors却造成了一切。该捆绑包比标准捆绑包大10％，因此，除非您真的需要它。您需要做的第一件事是创建一个空图 div 元素，其中应绘制图形。<p>有一些要在图表上绘制的数据。在此示例中，我只是使用一些随机数来创建图表。最后，您必须调用<code>plot()>函数，并为其提供所有信息，例如容器div，数据和布局选项。这是创建一个非常基本的线图的代码：

npm install plotly.js<br>

plotly.js中的所有图表都是使用JSON对象声明创建的。图表的每个属性，例如其颜色和数据，都有一个相应的JSON属性，可用于完全自定义图表的外观和行为。

这些属性可以将其广泛分为两类。第一个被称为 traces ，它们是用于提供有关要在图表上绘制的单个数据的信息的对象。第二类是>布局，它提供了控制图表的所有其他方面（例如标题或注释）的不同属性。图表类型进一步分类了不同的迹线，并且可供您绘制图表的属性取决于> type 属性的值。 在上面的示例中，我们创建了一个存储您想要在图表上绘制的跟踪类型和数据的对象。以下CODEPEN演示显示了上述代码的最终结果。

traceA在演示中可以看到，您可以放大，缩小或自动尺度图表。您也可以将图表下载为图像。图表本身看起来非常专业。

布局属性可以在本系列的其余教程中自定义图表

，我们将专注于学习与线条和条形图（如线图和条形图）相关的不同属性。在此之前，您还应该有一些基本知识，可以对不同的布局属性进行一些基本知识，该属性控制所有图表类型（例如字体，标题，X轴，Y轴等）所共有的方面。

您可以指定一个全局字体，在创建轨迹和其他布局组件（如轴和标题）时应使用该全局字体。这些选项是使用font>对象指定的，默认情况下，图表的所有组件都使用这些值。 color>，size和family键位于font键内。您可以使用它们分别设置全局字体颜色，全局字体大小和全局字体家庭。

>

每个图表都有一个title属性，可用于设置当前图表的标题。它为用户提供了有关您在图表上绘制的内容的一些信息。可以使用titlefont>属性指定标题的字体属性。就像globalfont属性一样，可以使用嵌套在color>属性内的size，family>键来控制标题的字体相关属性。titlefont

width>您可以使用height>>> and>> and> and> and> and> and> and> and and and and and and and and and and> geys指定图表中图表的宽度和高度。您还可以使用嵌套在margin键下的不同属性来控制图表周围的间距以及绘图区域。所有值均在像素中指定。

>

>使用l>属性，使用r>属性的右边缘指定左边边缘，使用t属性的最高边距和使用b> attribute的最高边距。默认情况下，绘图区域和轴线非常接近。您可以使用嵌套在键内的pad属性周围添加一些空间。填充物以像素指定，其默认值为零。margin

您可以为整个图表的背景以及绘图区域选择自己的颜色，以匹配网站的主题。这两种颜色默认情况下均设置为白色，但是您可以分别使用

和paper_bgcolor键为每个颜色指定每个颜色的不同值。plot_bgcolor>

您也可以为图表中所有轴指定标题和不同的字体属性。字体属性嵌套在相应轴的轴键内。您还可以独立地控制轴的基本颜色，以及用于其标题的字体的颜色。

rangemode有时，将点绘制在图表上的点不会一直降低到零。在这种情况下，绘制在轴上创建的壁虱也不会扩展到零。但是，如果您希望滴答始终从零开始，无论绘制的要点范围如何，都可以使用tozero>属性，并将其值设置为

>。

npm install plotly.js<br>

>以下代码snippet使用了一些属性，使用了我们刚刚讨论的一些属性，以修改我们在上一节中创建的图表的外观。教程，您了解了plotly.js库的各种功能。我还介绍了库的安装和使用以及不同的布局属性，以根据您的需要自定义图表的外观。

>这篇文章已通过雅各布·杰克逊（Jacob Jackson）的贡献进行了更新。雅各布是网络开发人员，技术作家，自由职业者和开源贡献者。

以上是使用Plotly.js创建交互式图表，第1部分：入门的详细内容。更多信息请关注PHP中文网其他相关文章！