使用Plotly.js创建交互式图表，第4部分：气泡图和点图

到目前为止，您已经学习了如何在Plotly.js中创建折线图和条形图 。 正如我在该系列的入门教程中提到的那样，Plotly.js不仅限于几种图表类型。 您可以使用该库创建20多种不同类型的图表。 这些图表类型中的每一种都有其自己的自定义选项集以及多个图表共有的属性。

在本教程中，您将学习如何在Plotly.js中创建气泡图和点状图。 这两种图表类型都使用与创建折线图时相同的scatter 。 这次的重要区别是mode属性将设置为markers 。

在Plotly.js中创建气泡图

气泡图用于在图表上显示数据的三个维度。 使用气泡或磁盘绘制与每个实体相关的数据，其中磁盘在xy轴上的位置标记其xy值，并且磁盘的面积用于绘制第三个数据点的值。 气泡图是散点图的变体。 因此，在创建气泡图时将type属性设置为scatter是有意义的。

创建气泡图时，您应该记住一些事情。 首先，给定数据点的第三个值由气泡的面积而不是其半径表示。 半径实际上与实际值的平方根成比例。 其次，您只能使用它们绘制正值。 这是有道理的，因为气泡的面积不能为负或零。

现在，让我们通过将mode属性设置为markers来创建我们的第一个气泡图。 控制图表中气泡外观的所有属性都位于标记对象下。 marker对象的size属性可用于指定气泡的大小作为第三个数据点。 此属性可以是数字或数字数组。 创建气泡图时，所有实体的第三个数据点都具有相同的值是非常罕见的。 因此，通常将size属性设置为数组。

可以使用opacity属性控制所有气泡的opacity 。 就像size一样，此属性也接受值为数字或数组或值在0到1之间的数字。对于折线图，不同气泡或磁盘的不透明度默认值为1。 ，不透明度的默认值为0.7。

可以用来准确创建气泡图的另一个非常有用的属性是