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

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

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

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

创建第一个条形图

通过将type属性的值设置为bar，可以在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提供的《 行星概况》 。

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

如果需要以图表的形式表示更复杂的数据，则可以使用barmode可用的barmode属性来实现。 可以将此属性设置为stack ， group ， overlay和relative 。 如果要绘制带有相关信息的多个条形迹线，通常会很有用。

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

这是一些代码，将前八个国家的GDP贡献汇总在一起。 名义GDP部门构成数据取自维基百科。

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

var primaryGDP = {
  x: ["United States", "China", "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", "China", "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", "China", "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会将单个bar置于子组中。 尽管此模式对于直接比较很有用，但您应谨慎使用它，因为它将隐藏在plot()函数中较早传递的较短的条。

下图已创建， barmode设置为overlay 。 现在，您可以轻松地比较所有国家中单个部门的GDP贡献。 值得注意的是，单个国家/地区的所有障碍现在都从底部开始。 这使得一些观察非常容易发现。 例如，现在非常清楚的是，在所有排名前八位的国家中，服务业的GDP>工业部门的GDP>农业部门的GDP。

在目前的规模上，不可能正确地看到农业部门对德国，英国和法国的GDP的贡献。 在这种情况下，Plotly.js的放大功能非常有用。 您可以根据需要进行任意放大，图表仍然非常清晰。

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

您可以分别使用bargap和bargroupgap属性控制不同类别​​的条形之间以及子组中条形之间的bargap 。 到目前为止，所有条形图都已绘制出来，以绘制实际的GDP数据。 但是，您可以使用barnorm参数以百分比或分数的形式绘制条形图。 当barnorm设定为percentage或fraction ，主要类别的捐款总额计算，然后一个个被分配给基于亚组值单个条。

例如，服务业对美国国内生产总值的贡献约为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'
};

当您绘制一组带有负值和正值的迹线时，称为“ relative ”的最终barmode值很有用。 在这种情况下，正值绘制在轴上方，负值绘制在轴下方。

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

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

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

使用text属性可以提供有关特定条形图或绘制点的其他信息。 可以使用inside ， outside ， auto和none来指定文本的位置。 当使用inside ，文本将位于其结尾附近的条内。 文本本身可以缩放和旋转，以使其适合条形图。 当使用“ outside ，文本将被放置在其末端附近的栏外。 在这种情况下，将仅缩放文本。 如果没有为hovertext属性设置任何值，则text的值也会显示在悬停标签内。

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

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

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 );

如您所见，我已经将base和color值作为数组传递了。 当车辆朝同一方向行驶时，它们的行驶速度似乎会变慢，因此我们需要将自己车辆的速度作为基准值来获得实际速度。

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

结论

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

但是，您仍然可以在Plotly上的条形跟踪参考部分中阅读一些其他属性。 我在本教程中解释过的一些属性在参考部分中缺失，但是如果您想了解更多关于它们的信息，可以在库的源文件中找到它们。

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

翻译自: https://code.tutsplus.com/tutorials/create-interactive-charts-using-plotlyjs-bar-charts--cms-29208