简介
plotly.js 是一款基于JavaScript的交互式数据可视化库，可以在网页上创建各种类型的图表，如折线图、散点图、热力图等。它不仅提供了精美的样式和动画效果，还支持多种数据格式和数据源，并具有灵活的配置选项。
本文介绍如何使用npm安装并使用plotly.js来制作一些常见的图表类型，包括数据读入、配置选项、布局设计、事件处理等方面的内容。
安装与引用
首先需要在项目中安装plotly.js，可以使用npm或者通过CDN来引用。下面以npm为例：
npm install plotly.js
在HTML文件中引用plotly.js的方式如下：
<head> <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> </head>
折线图
折线图是一种经典的可视化方式，用于展示随时间变化的连续数据。下面给出一个简单的实例，用plotly.js来制作一个折线图。
-- -------------------- ---- -------
----- ---- - -
-
-- --- -- -- -- ---
-- --- -- -- -- ---
----- ---------
-
--
----- ------ - -
------ --------
------ -
------ -----
--------- -----
--------- -----
--
------ -
------ -----
--------- ----
-
--
----------------------- ----- --------上述代码中，data是一个数组，其中包含了要绘制的数据和图表类型等信息。这里我们使用 scatter 类型来表示折线图。
layout对象用于配置图表的布局和样式，包括标题、坐标轴、边界等。在本例中，我们设置了 xaxis 和 yaxis 的显示选项。最后，调用Plotly.newPlot()函数来将数据和布局渲染到指定的 HTML 元素上。
散点图
散点图是一种用于表示两个变量之间的关系的图表类型，通常用于发现异常值或者特殊模式。下面给出一个简单的实例，用plotly.js来制作一个散点图。
-- -------------------- ---- -------
----- ---- - -
-
-- --- -- -- -- ---
-- --- -- -- -- ---
----- ----------
------- -
----- ---
------ ----------- ---------- ---------- ---------- ----------
-
-
--
----- ------ - -
------ --------
------ -
------ -----
--------- -----
--------- -----
--
------ -
------ -----
--------- ----
-
--
----------------------- ----- --------在本例中，我们使用 markers 类型来表示散点图，并通过 marker 对象设置了散点的大小和颜色。注意，这里颜色需要使用一个数组来表示不同的数据点。
热力图
热力图是一种用于显示二维数据密度的图表类型，通常用于可视化地图、物理实验等领域。下面给出一个简单的实例，用plotly.js来制作一个热力图。
const x = ['A', 'B', 'C', 'D']; const y = [1, 2, 3, 4]; const z = [ [1, 2, 3, 4], > 来源：[JavaScript中文网](https://www.javascriptcn.com/post/32614) ，转载请注明来源 [https://www.javascriptcn.com/post/32614](https://www.javascriptcn.com/post/32614)
