使用Plotly.js创建交互式图表第3部分：条形图

在我们的上一个教程中，您学习了如何在 Plotly.js 中创建折线图。折线图的每个方面，例如要绘制的数据以及连接绘制点的线条的形状或颜色，都可以使用一组属性进行控制。Plotly.js 允许您以类似的方式创建条形图。 

在本教程中，您将学习如何使用 Plotly.js 创建不同类型的条形图。我还将讨论如何使用特定属性来控制这些图表的外观，例如条形颜色和宽度。

在继续之前，我想提一下，您还可以 使用 chart.js 创建一些基本的条形图。如果您不打算使用 Plotly.js 的任何花哨功能，那么使用轻量级库更有意义。

创建您的第一个条形图

type通过将属性的值设置为 ，您可以在 Plotly.js 中绘制条形图 bar。其余任务，例如创建跟踪对象或提供要绘制的数据，与创建折线图的过程类似。这是在 Plotly 中创建基本条形图所需的代码。

var barDiv = document.getElementById('bar-chart');

var traceA = {
  x: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"],
  y: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638],
  type: 'bar'
};

var data = [traceA];

var layout = {
  title:'Density of Planets (kg/m3)'
};

Plotly.plot( barDiv, data, layout );

这是上面代码创建的图表。行星密度数据取自 NASA 提供 的行星情况说明书。

创建堆叠、分组和相对条形图

如果您需要以图表的形式表示更复杂的数据，您可以使用barmodePlotly 中提供的属性来执行此操作。此属性可以设置为stack、group、overlay和relative。如果您想绘制具有相关信息的多个条形轨迹，这通常会很有帮助。

该 stack 值创建堆叠条形图，其中代表实体子组的条形彼此重叠以形成单个列。子组中的所有条形都有不同的颜色，显示该部分对整个实体的单独贡献。堆叠条的组合长度表示该实体的总大小。

这是一些将前八个***的 GDP 贡献叠加在一起的代码。名义 GDP 部门构成数据取自维基百科。

var barDiv = document.getElementById('bar-chart');

var primaryGDP = {
  x: ["United States", "***", "Japan", "Germany", "United Kingdom", "France", "India", "Italy"],
  y: [215364, 964772, 56764, 27959, 18549, 47277, 391672, 37050],
  type: 'bar',
  name: 'Agricultural Sector'
};

var secondaryGDP = {
  x: ["United States", "***", "Japan", "Germany", "United Kingdom", "France", "India", "Italy"],
  y: [3427876, 4464876, 1300833, 982067, 556477, 455355, 580755, 448305],
  type: 'bar',
  name: 'Industrial Sector'
};

var tertiaryGDP = {
  x: ["United States", "***", "Japan", "Germany", "United Kingdom", "France", "India", "Italy"],
  y: [14303756, 5788633, 3377434, 2484874, 2074864, 1985647, 1280813, 1367145],
  type: 'bar',
  name: 'Service Sector'
};

var data = [primaryGDP, secondaryGDP, tertiaryGDP];

var layout = {
  title:'Nominal GDP Sector Composition of Top 8 Countries',
  barmode: 'stack'
};

Plotly.plot( barDiv, data, layout );

子组的堆叠顺序取决于将数据传递给函数的顺序。

将 设置barmode为overlay会将子组中的各个条相互叠加。虽然此模式对于直接比较很有用，但您应该小心使用它，因为它会隐藏plot()函数之前传递的较短的条。 

以下图表已创建并barmode设置为overlay。您现在可以轻松地比较所有***/地区的单个部门的 GDP 贡献。值得注意的是，现在一个***的所有酒吧都是从底部开始的。这使得一些观察很容易被发现。例如，现在很明显，在所有排名前 8 的***中，服务业 GDP > 工业部门 GDP > 农业部门 GDP。 

以目前的规模，不可能恰当地看到农业部门对德国、英国和法国GDP的贡献。Plotly.js 放大的能力在这种情况下非常有用。您可以随意放大，图表仍然会非常清晰。

您也可以将它们放在一起形成一个组，而不是将子组的所有条堆叠在一起。您必须将 设置 barmode 为 group 创建分组图表。请记住，在分组图表中提供过多信息会使它们难以阅读。 

bargap 您可以分别使用和 bargroupgap 属性控制来自不同类别的条以及子组中的条之间的空间 。到目前为止，所有的条形图都是为了绘制实际的 GDP 数字而绘制的。但是，您可以使用参数以百分比barnorm或分数的形式绘制条形图。当设置为或时，将计算主要类别的总贡献，然后根据子组值将百分比分配给各个条形。barnormpercentagefraction

例如，服务业对美国 GDP 的贡献率约为 79.7%。这意味着在美国的情况下，服务业的门槛将达到 79.7 大关。本段中讨论的所有这些属性都在layout对象中指定。这是指定所有这些参数的布局对象的示例。

var layout = {
  title:'Nominal GDP Sector Composition of Top 8 Countries',
  barmode: 'group',
  bargap: 0.25,
  bargroupgap: 0.1,
  barnorm: 'percent'
};

当您绘制一组具有负值和正值的轨迹时，barmode调用的最终值很有用。relative在这种情况下，正值绘制在轴上方，负值绘制在轴下方。

更改条形颜色、宽度、文本和其他属性

color可以使用嵌套在marker参数中的属性更改跟踪中条形的颜色。可以以类似的方式更改条形轮廓的和color。width这些选项嵌套在 line属性中，该属性本身嵌套在 marker. 这些选项中的每一个都可以作为单个值提供以同时指定跟踪中所有条的颜色和宽度，也可以作为数组提供以指定单个条的不同颜色或宽度。

另一个您可能会发现有用的重要属性是base. 它允许您指定绘制条形底部的位置。在您发布需要偏移以显示正确结果的相对值的某些情况下，它可能会有所帮助。 

可以使用该text属性提供有关特定条形或绘图点的附加信息。可以使用inside、outside、auto和指定文本的位置none。使用inside时，文本将定位在靠近其末端的栏内。文本本身可以缩放和旋转，以便它正确地适合栏内。使用outside时，文本将放置在靠近其末端的栏之外。在这种情况下，文本只会被缩放。如果没有为该hovertext属性设置值，则 的值text也会显示在悬停标签内。 

insidetextfont您还可以使用和outsidetextfont属性对位于栏内和栏外的文本使用不同的字体系列 。

这是使用所有这些属性创建图表的示例，该图表以单个移动车辆为参考绘制不同车辆的相对速度。

var barDiv = document.getElementById('bar-chart');
var lightGreen = 'rgba(0,255,50,0.6)';
var redShade   = 'rgba(255,50,0,0.6)';

var traceA = {
  x: ["Car A", "Car B", "Car C", "Car D", "Car E", "Car F", "Car G", "Car H"],
  y: [100, 80, 40, 160, 75, 93, 8, 125],
  type: 'bar',
  text: ['','','','Overspeeding','','Overspeeding','','Overspeeding'],
  textposition: 'inside',
  width: 0.8,
  base: [-40, 10, 50, -45, 0, 15, 60, -20],
  marker: {
    color: [lightGreen, lightGreen, lightGreen, redShade, lightGreen, redShade, lightGreen, redShade],
    line: {
      color: 'black',
      width: 1
    }
  }
};

var data = [traceA];

var layout = {
  title:'Speed of Cars (km/hr)',
  yaxis: {
    dtick: 15
  }
};

Plotly.plot( barDiv, data, layout );

如您所见，我已将baseandcolor值作为数组传递。当车辆向同一个方向行驶时，它们似乎移动得更慢，因此我们需要将自己车辆的速度作为基值添加到实际速度。 

当车辆向相反方向行驶时，它们似乎在快速行驶，因此我们需要减去自己车辆的速度才能得到准确的结果。这使我们能够在同一地块上显示有关我们自己的车辆速度的其他信息。下面的 CodePen 示例显示了上述代码绘制的最终图表。

结论

barmode本教程向您展示了如何使用该属性在 Plotly.js 中创建各种条形图。您还学习了如何使用一组特定属性自定义图表中各个条形的外观。我试图在教程中涵盖条形图的所有常用属性。