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

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

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

在 Plotly.js 中创建气泡图

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

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

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

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

可用于准确创建气泡图的另一个非常有用的属性sizemode是参数。此属性确定是否size应将属性中指定的值视为气泡的面积或其直径。sizemode的默认值为diameter。sizemode但是，如果您正在创建气泡图，则将的值设置为更有意义area。这样，您无需进行任何计算即可自行确定值的正确气泡大小。您可以使用以下代码使用我们刚刚讨论的参数创建气泡图。

var bubbleDiv = document.getElementById("bubble-chart");

var traceA = {
  type: "scatter",
  mode: "markers",
  x: [5, 13, 24, 35, 46, 60],
  y: [40, 70, 65, 15, 75, 49],
  marker: {
    size: [100, 200, 800, 600, 500, 600],
    sizemode: 'area'
  }
};

var data = [traceA];

var layout = {
  title: "A Bubble Chart in Plotly"
};

Plotly.plot(bubbleDiv, data, layout);

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

现在，每个气泡都有相同的颜色。使用该color属性可以一次更改单个气泡或整个轨迹的颜色。

另一种设置不同气泡颜色的方法是使用彩条。color在这种情况下，气泡颜色是根据您传递给对象属性的数组中指定的数值确定的marker。绘制图表时，此颜色条可以作为第四个数据点。

例如，假设您正在绘制一个气泡图，显示一个大城市中不同公园的位置和面积。在这种情况下，气泡图将是完美的。但是，每个公园的树木密度或访问每个公园的平均人数可能不同。如果将每个气泡的颜色指定为数值，则可以为各个气泡分配不同的颜色以绘制第四个数据点的值。

在我们的示例中，可以使用colorscale属性指定与不同大小的树密度相对应的颜色。使用此属性时，您需要至少指定最低 (0) 和最高 (1) 值的映射。一个有效值的例子 colorscale是 [[0, 'rgb(0, 0, 0)'], [1, 'rgb(0, 255, 0)']]。您还可以选择使用调色板名称字符串作为colorscale值。灰色, YlGnBu ,绿色, YlOrRd , Bluered , RdBu , Reds , Blues , Picnic , Rainbow , Portland , Jet , Hot、Blackbody、Earth、Electric和Viridis都被视为有效值。

cmin您可以使用该属性指定最低色标值应映射到的最低数值颜色值。cmax同样，您还可以使用属性指定最高色阶值应映射到的最高色值。reversescale可以通过将参数的值设置为来反转颜色映射 true。在这种情况下，最低颜色将映射到最高值，而最高颜色将映射到最低值。

该colorbar对象提供了很多可用于控制其外观的参数。Plotly.js 创建的颜色条的宽度可以使用thickness参数来控制。粗细以像素为单位指定，默认值为30。颜色条的长度，不包括两端的padding，可以使用len属性指定。可以借助 x和y参数设置彩条的 x 和 y 位置。该位置是根据绘图分数指定的，其有效值可以介于 -2 和 3 之间。默认值为x1.02，默认值为y0.5。颜色条的 x 和 y 填充可以使用xpad和类似地控制ypad参数。title您可以使用该属性为颜色条分配标题。可以使用titleside参数相对于颜色条指定该标题的位置。此参数的有效值为top、bottom和right。默认值为top。

以下代码将创建一个气泡图，其中绿色的暗度映射到该公园的树木密度。

var bubbleDiv = document.getElementById("bubble-chart");

var traceA = {
  type: "scatter",
  mode: "markers",
  x: [5, 13, 24, 35, 46, 60],
  y: [40, 70, 65, 15, 75, 49],
  marker: {
    color: [35, 10, 50, 40, 18, 30],
    colorscale: [[0, 'rgb(200, 255, 200)'], [1, 'rgb(0, 100, 0)']],
    cmin: 0,
    cmax: 50,
    size: [600, 1200, 800, 400, 1500, 2000],
    sizemode: 'area',
    showscale: true,
    colorbar: {
      thickness: 10,
      y: 0.5,
      ypad: 0,
      title: 'Tree Density',
      titleside: 'bottom',
      outlinewidth: 1,
      outlinecolor: 'black',
      tickfont: {
        family: 'Lato',
        size: 14,
        color: 'green'
      }
    }
  }
};

var data = [traceA];

var layout = {
  title: "A Bubble Chart in Plotly"
};

Plotly.plot(bubbleDiv, data, layout);

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

在 Plotly.js 中创建点图

点图是用于以非常简单的比例绘制点的图表。您应该记住，点图仅适用于少量数据。绘制大量点会使图表非常混乱。就像气泡图一样，点图也需要您将type属性设置为scatter并将mode属性设置为markers。由于点图也使用标记来绘制点，因此它们的所有自定义选项也可以在marker对象下使用。

以下代码创建了一个点图，显示每年考试中排名前两名的学生获得的分数。我还使用了一些与图例和 x 轴相关的其他属性来改变我们绘图的整体外观。

var dotDiv = document.getElementById("dot-chart");

var traceA = {
  type: "scatter",
  mode: "markers",
  x: [2011, 2012, 2013, 2014, 2015, 2016],
  y: [789, 795, 760, 775, 780, 783],
  name: 'Highest Marks',
  marker: {
    color: 'rgba(156, 165, 196, 0.5)',
    line: {
      color: 'rgba(156, 165, 196, 1)',
      width: 1,
    },
    symbol: 'circle',
    size: 20
  },
  hoverlabel: {
    bgcolor: 'black',
  }
};

var traceB = {
  type: "scatter",
  mode: "markers",
  x: [2011, 2012, 2013, 2014, 2015, 2016],
  y: [769, 755, 747, 770, 771, 781],
  name: 'Second Highest Marks',
  marker: {
    color: 'rgba(165, 196, 50, 0.5)',
    line: {
      color: 'rgba(165, 196, 50, 1)',
      width: 1,
    },
    symbol: 'circle',
    size: 20
  },
  hoverlabel: {
    bgcolor: 'black',
  }
};

var data = [traceA, traceB];

var layout = {
  title: 'Marks Obtained by Top Two Students',
  xaxis: {
    showgrid: false,
    showline: true,
    linecolor: 'rgb(200, 0, 0)',
    ticks: 'outside',
    tickcolor: 'rgb(200, 0, 0)',
    tickwidth: 4
  },
  legend: {
    bgcolor: 'white',
    borderwidth: 1,
    bordercolor: 'black',
    orientation: 'h',
    xanchor: 'center',
    x: 0.5,
    font: {
      size: 12,
    }
  },
  paper_bgcolor: 'rgb(255, 230, 255)',
  plot_bgcolor: 'rgb(255, 230, 255)'
};

Plotly.plot(dotDiv, data, layout);

我们已经marker在上一节中介绍了对象的不同属性。这一次，我对图表的布局进行了一些更改。使用该title属性为您的图表分配一个标题将通过快速让查看者知道图表的内容来使其更具信息性。我还更改了 x 轴线的外观，使其从其他线条中脱颖而出。如您所见，刻度线的宽度和颜色可以使用 tickcolor和tickwidth属性来控制。

可以使用x和y属性指定图例的位置。这两个数字都接受 -2 和 3 之间的值。位置以分数形式指定。xanchor可以使用和yanchor属性指定 x 和 y 位置的锚点。这两个属性决定了应该用作参考来测量由x和y属性指定的距离的点。在上面的示例中， x属性的 0.5 距离是从图例中心测量的，因为xanchor已设置为center。