条形图

概览

Google 条形图使用 SVGVML 在浏览器中呈现,以适合用户的浏览器。与所有 Google 图表一样,当用户将鼠标悬停在数据上时,条形图会显示提示。如需查看此图表的纵向版本,请参阅柱形图

示例

彩条

让我们绘制四种贵金属的密度图表:

上方所有颜色都是默认的蓝色。这是因为它们都是同一系列的一部分;如果有第二个系列,则应该以红色显示。我们可以使用样式角色自定义以下颜色:

颜色有三种不同的选择方式,我们的数据表格展示了所有这三种方式:RGB 值、英语颜色名称和类似于 CSS 的声明:

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }],
         ['Copper', 8.94, '#b87333'],            // RGB value
         ['Silver', 10.49, 'silver'],            // English color name
         ['Gold', 19.30, 'gold'],
         ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration
      ]);

条形图样式

借助样式角色,您可以通过类似于 CSS 的声明来控制条形外观的以下几个方面:

  • color
  • opacity
  • fill-color
  • fill-opacity
  • stroke-color
  • stroke-opacity
  • stroke-width

我们不建议您在图表中随意混合样式(选择样式并继续使用),但为了演示所有样式属性,我们提供了一个采样器:

前两个条形都使用特定的 color(第一个带英文名称,第二个带 RGB 值)。未选择任何 opacity,因此系统将使用默认值 1.0(完全不透明);正因为如此,第二个条形遮挡了它后面的网格线。在第三个栏中,opacity 为 0.2,显示了网格线。第四条栏中使用三个样式属性:stroke-colorstroke-width 绘制边框,使用 fill-color 指定矩形内部的颜色。此外,最右侧栏还使用 stroke-opacityfill-opacity 为边框选择填充不透明度:

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

标签栏

图表有多种类型的标签,例如 tick 标签、图例标签和提示中的标签。在本部分中,我们将介绍如何在条形图中(或附近)放置标签。

假设我们要使用适当的化学符号为每个条形添加注解。我们可以使用 annotation 角色实现此目的:

在我们的数据表中,我们使用 { role: 'annotation' } 定义一个新列,用于存储条形图标签:

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

虽然用户可以将鼠标悬停在柱形上以查看数据值,但您可能希望将它们包含在柱形上:

这比应该稍微复杂一点,因为我们创建了一个 DataView 来为每个条指定注解。

  <script type="text/javascript">
    google.charts.load("current", {packages:["corechart"]});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ["Element", "Density", { role: "style" } ],
        ["Copper", 8.94, "#b87333"],
        ["Silver", 10.49, "silver"],
        ["Gold", 19.30, "gold"],
        ["Platinum", 21.45, "color: #e5e4e2"]
      ]);

      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       2]);

      var options = {
        title: "Density of Precious Metals, in g/cm^3",
        width: 600,
        height: 400,
        bar: {groupWidth: "95%"},
        legend: { position: "none" },
      };
      var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
      chart.draw(view, options);
  }
  </script>
<div id="barchart_values" style="width: 900px; height: 300px;"></div>

如果我们想要以其他方式设置值的格式,可以定义格式设置工具并将其封装在函数中,如下所示:

      function getValueAt(column, dataTable, row) {
        return dataTable.getFormattedValue(row, column);
      }

然后,我们可以使用 calc: getValueAt.bind(undefined, 1) 调用它。

如果标签太大而无法完全显示在栏中,则会显示在外部:

堆叠条形图

堆叠条形图是将相关值叠放在一起的条形图表。如果存在任何负值,则这些值会以相反的顺序堆叠在图表的轴基线下方。堆叠条形图通常在类别可自然地划分为各种组成部分时使用。例如,假设存在一些虚构的图书销售情况,并按流派除以不同时段:

您可以通过将 isStacked 选项设置为 true 来创建堆叠条形图:

      var data = google.visualization.arrayToDataTable([
        ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
         'Western', 'Literature', { role: 'annotation' } ],
        ['2010', 10, 24, 20, 32, 18, 5, ''],
        ['2020', 16, 22, 23, 30, 16, 9, ''],
        ['2030', 28, 19, 29, 30, 12, 13, '']
      ]);

      var options = {
        width: 600,
        height: 400,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '75%' },
        isStacked: true
      };

堆叠条形图还支持 100% 堆叠,其中在每个网域值上堆叠元素堆栈,使其相加等于 100%。选项包括 isStacked: 'percent'(将每个值的格式设置为 100%)和 isStacked: 'relative'(将每个值的格式设置为 1 的小数)。此外,还有一个 isStacked: 'absolute' 选项,其功能等同于 isStacked: true

请注意,在右侧的 100% 堆叠图表中,刻度值基于 0-1 的相对比例,以 1 的小数表示,但轴值显示为百分比。这是因为百分比轴滴答声是将“#.##%”的格式应用到相对 0-1 的缩放值的结果。使用 isStacked: 'percent' 时,请务必使用 0-1 相对比例指定所有刻度。

堆叠
        var options_stacked = {
          isStacked: true,
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {minValue: 0}
        };
    
100% 堆叠
        var options_fullStacked = {
          isStacked: 'percent',
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {
            minValue: 0,
            ticks: [0, .3, .6, .9, 1]
          }
        };
    

创建 Material 条形图

2014 年,Google 公布了相关准则,旨在支持在 Google 平台上运行的各种媒体资源和应用(例如 Android 应用)的通用外观和风格。我们将这项工作称为 Material Design。我们将提供所有核心图表的“Material”版本;如果您喜欢它们的外观,欢迎使用。

创建 Material 条形图类似于创建我们现在所说的“传统”条形图。加载 Google 可视化 API(尽管使用 'bar' 软件包,而不是 'corechart' 软件包),定义数据表,然后创建对象(但属于 google.charts.Bar 类,而非 google.visualization.BarChart 类)。

注意:Material 图表无法在旧版 Internet Explorer 中使用。(IE8 和更早版本不支持 SVG,而 Material Chart 要求使用 SVG)。

与传统条形图表相比,Material 条形图有多项细微的改进,包括改进了调色板、圆角、标签格式更清晰、系列之间的默认间距更紧凑、网格线和标题更加柔和(以及添加字幕)。

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2014', 1000, 400, 200],
          ['2015', 1170, 460, 250],
          ['2016', 660, 1120, 300],
          ['2017', 1030, 540, 350]
        ]);

        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
          },
          bars: 'horizontal' // Required for Material Bar Charts.
        };

        var chart = new google.charts.Bar(document.getElementById('barchart_material'));

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
  </head>
  <body>
    <div id="barchart_material" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Material 图表目前处于 Beta 版阶段。其外观和互动在很大程度上是最终的,但传统图表中的许多选项尚未提供。您可以在此问题中找到尚不支持的选项列表。

此外,声明选项的方式尚未最终确定,因此如果您使用的是任何传统选项,则必须将其替换为 Material 选项,具体方法是替换以下代码行:

chart.draw(data, options);

...替换为:

chart.draw(data, google.charts.Bar.convertOptions(options));

使用 google.charts.Bar.convertOptions() 可让您利用某些功能,例如 hAxis/vAxis.format 预设选项。

Dual-X 图表

注意:双 X 轴仅适用于 Material 图表(即带有 bar 软件包的图表)。

有时,您可能需要在条形图中显示两个系列,并包含两个独立的 x 轴:一个系列的上轴,另一个系列的下轴:

请注意,我们的两个 x 轴不仅带有不同的解析标签(“parsecs”和“apparent magnitude”),还分别有各自的缩放和网格线。如果要自定义此行为,请使用 hAxis.gridlines 选项。

在下面的代码中,axesseries 选项结合使用可以指定图表的双重外观。series 选项指定每个轴使用的轴('distance''brightness';它们不需要与数据表中的列名称有任何关系)。然后,axes 选项可将此图表设为双 X 轴图表,将 'apparent magnitude' 轴放在顶部,'parsecs' 轴放在底部。

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawStuff);

      function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
          ['Galaxy', 'Distance', 'Brightness'],
          ['Canis Major Dwarf', 8000, 23.3],
          ['Sagittarius Dwarf', 24000, 4.5],
          ['Ursa Major II Dwarf', 30000, 14.3],
          ['Lg. Magellanic Cloud', 50000, 0.9],
          ['Bootes I', 60000, 13.1]
        ]);

        var options = {
          width: 800,
          chart: {
            title: 'Nearby galaxies',
            subtitle: 'distance on the left, brightness on the right'
          },
          bars: 'horizontal', // Required for Material Bar Charts.
          series: {
            0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
            1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
          },
          axes: {
            x: {
              distance: {label: 'parsecs'}, // Bottom x-axis.
              brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis.
            }
          }
        };

      var chart = new google.charts.Bar(document.getElementById('dual_x_div'));
      chart.draw(data, options);
    };
    </script>
  </head>
  <body>
    <div id="dual_x_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

热门 X 图

注意:顶部 X 轴仅适用于 Material 图表(即带有 bar 软件包的图表)。

如果您想将 X 轴标签和标题放在图表顶部而不是底部,则可以在 Material 图表中使用 axes.x 选项执行此操作: