i有一个Google可视化条图示例,其中数据格式如下所示。
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]
]);
如何制作费用和利润酒吧堆叠在销售是单独的酒吧的位置?
目前,Google Charts API在构建功能中没有此功能,但是通过对DataTable和Chart选项进行了一些重塑,您仍然可以实现此目标。
我的解决方案
堆叠的栏应包含仅支出和利润的值,以避免带有销售的堆积栏,销售列中的值表示为零。通过具有类似的数据行,但目前销售的价值以及其余的零来创建一个单独的销售栏。需要指定日期数据类型,以便将所有条形图与同一日期分组,如果未实现,则每个条形图之间将在同一年之间存在差距。 有关列的日期表示形式的更多信息。
var data = google.visualization.arrayToDataTable([
[ {label: 'Year', id: 'year', type: 'date'},
{label: 'Sales', id: 'Sales', type: 'number'},
{label: 'Expenses', id: 'Expenses', type: 'number'},
{label: 'Profit', id: 'Profit', type: 'number'}],
[{v:new Date('2014'), f:'2014'}, 0, 400, 200],
[{v:new Date('2014'), f:'2014'}, 1000, 0, 0],
[{v:new Date('2015'), f:'2015'}, 0, 460, 250],
[{v:new Date('2015'), f:'2015'}, 1170, 0, 0],
[{v:new Date('2016'), f:'2016'}, 0, 1120, 300],
[{v:new Date('2016'), f:'2016'}, 600, 0, 0],
[{v:new Date('2017'), f:'2017'}, 0, 540, 350],
[{v:new Date('2017'), f:'2017'}, 1030, 0, 0]
]);
要达到堆叠栏,使用了Google Charts配置选项isStacked: true
。为了避免垂直轴像几个月和几天一样的时间表,垂直轴是使用vAxis: {format: 'yyyy'}
格式显示的。有关格式的更多信息,请参见此处。为了避免在不同年份的栏之间间距,使用了功能bar: {groupWidth: '90%'}
。
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'horizontal', // Required for Material Bar Charts.
hAxis: {format: 'decimal'},
vAxis: {
format: 'yyyy'
},
height: 400,
colors: ['#1b9e77', '#d95f02', '#7570b3'],
isStacked: true,
bar: {groupWidth: '90%'}
};