使用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。

可以用来准确创建气泡图的另一个非常有用的属性是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);

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

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

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

在我们的示例中，可以使用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。可以使用len属性指定彩条的长度（不包括两端的填充）。 可以通过x和y参数设置彩条的x和y位置。 位置在情节的级分的形式指定，其有效值可以-2和3对的默认值之间的任意值x为1.02，而对于默认值y是0.5。 可以使用xpad和ypad参数类似地控制颜色栏的x和y填充。 您可以使用title属性为颜色栏分配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中创建点图

点图是用于以非常简单的比例绘制点的图表。 您应该记住，点图仅适用于少量数据。 绘制大量点会使图表非常混乱。 就像气泡图一样，点图也需要您将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属性为图表分配标题，可以Swift让查看者知道图表的含义，从而使图表更具参考价值。 我还更改了x轴线的外观，使其与其他线脱颖而出。 如您所见，可以使用tickcolor和tickwidth属性控制刻度线的宽度和颜色。

可以使用x和y属性指定图例的位置。 这两个数字都接受一个介于-2和3之间的值。位置以小数表示。 可以使用xanchor和yanchor属性指定x和y位置的xanchor 。 这两个属性确定了一些点，这些点应被用作测量x和y属性指定的距离的参考。 在上面的示例中，由于xanchor已设置为center ，因此x属性距图例中心的距离为0.5。

最后的想法

本教程向您展示了如何使用同一标记对象的属性在Plotly.js中创建气泡图和点图。 您还学习了如何使用颜色条向气泡图添加其他信息，以及如何根据自己的要求设置这些条的颜色比例。

我试图涵盖几乎所有在项目中可能必须使用的标记属性。 如果您需要更多有关创建气泡图和点状图的信息，可以访问Plotly.js网站的标记参考部分 。 在下一个教程中，您将学习如何在Plotly.js中创建饼图和量表。

如果您对本教程有任何疑问，请随时在评论中让我知道。

翻译自: https://code.tutsplus.com/tutorials/create-interactive-charts-using-plotlyjs-bubble-and-dot-charts--cms-29209