概览
Google 条形图使用 SVG 或 VML 在浏览器中呈现,以适合用户的浏览器。与所有 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-color
和 stroke-width
绘制边框,使用 fill-color
指定矩形内部的颜色。此外,最右侧栏还使用 stroke-opacity
和 fill-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}
};
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
选项。
在下面的代码中,axes
和 series
选项结合使用可以指定图表的双重外观。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
选项执行此操作: