Google堆叠柱状图列重叠原因及解决方法咨询

问题现象 #

当前使用Google Charts绘制的堆叠柱状图，列宽较宽且相互重叠，而常规多数据行柱状图应呈现不重叠的窄列效果。

原因分析 #

1. X轴为日期类型：Google Charts对日期坐标轴会按实际时间间隔分配空间，你的数据中日期并非连续且间隔不均，图表为填充整个区域会自动加宽柱子，最终导致重叠。
2. 未配置柱子宽度参数：缺少bar.groupWidth这类控制柱子宽度的选项，图表默认宽度计算在日期轴场景下会出现过度填充的情况。

解决方法 #

方法一：将日期轴改为字符串分类轴 #

把X轴的日期转换为字符串类型，每个日期会被当作独立分类项，图表会均匀分配柱子宽度，彻底避免重叠。

修改后的完整代码：

google.charts.load('current', { 'packages': ['corechart', 'table'], 'language': 'hu'});
google.charts.setOnLoadCallback(function() {
    drawChart();
});

options = { 
    "isStacked": true, 
    "hAxis": { "title": "Nap" }, 
    "vAxis": { "title": "Darab" }, 
    "chartArea": { "top": 20, "height": "75%" }, 
    "colorAxis": { "legend": { "position": "bottom" } } 
} ;

// 将day的类型改为string
headers = [ { "columnName": "day", "columnType": "string" }, { "columnName": "n1", "columnType": "number" }, { "columnName": "n2", "columnType": "number" }, { "columnName": "n3", "columnType": "number" }, { "columnName": "n4", "columnType": "number" }, { "columnName": "n5", "columnType": "number" }, { "columnName": "n6", "columnType": "number" }, { "columnName": "n7", "columnType": "number" }, { "columnName": "n8", "columnType": "number" }, { "columnName": "n9", "columnType": "number" }, { "columnName": "n10", "columnType": "number" }, { "columnName": "n11", "columnType": "number" } ] ;

// 将日期转为匈牙利语格式的字符串
data = [ [ new Date("2023-04-11T22:00:00.000Z").toLocaleDateString('hu-HU'), 9, 6, 1, null, null, null, null, null, null, null, null ], [ new Date("2023-04-08T22:00:00.000Z").toLocaleDateString('hu-HU'), 2, 3, null, null, null, null, 1, null, null, null, null ], [ new Date("2023-04-26T22:00:00.000Z").toLocaleDateString('hu-HU'), 3, 14, 4, 2, null, 4, null, null, 1, null, 1 ], [ new Date("2023-04-03T22:00:00.000Z").toLocaleDateString('hu-HU'), 8, 11, null, 1, 2, null, 4, null, null, null, null ], [ new Date("2023-04-23T22:00:00.000Z").toLocaleDateString('hu-HU'), 5, 7, null, null, 2, null, null, null, null, null, null ], [ new Date("2023-04-14T22:00:00.000Z").toLocaleDateString('hu-HU'), 4, 5, null, null, null, null, null, null, null, null, null ], [ new Date("2023-04-18T22:00:00.000Z").toLocaleDateString('hu-HU'), 5, 5, 1, 1, 1, null, null, 3, null, null, null ], [ new Date("2023-04-25T22:00:00.000Z").toLocaleDateString('hu-HU'), 5, 12, 2, 5, null, 7, 1, 1, 1, null, null ], [ new Date("2023-04-12T22:00:00.000Z").toLocaleDateString('hu-HU'), 4, 4, null, 1, 4, null, null, null, null, null, null ], [ new Date("2023-04-06T22:00:00.000Z").toLocaleDateString('hu-HU'), 2, 2, null, null, null, null, null, null, null, null, null ], [ new Date("2023-04-17T22:00:00.000Z").toLocaleDateString('hu-HU'), 6, 6, 1, null, 1, null, 1, null, null, null, null ], [ new Date("2023-04-04T22:00:00.000Z").toLocaleDateString('hu-HU'), 3, 8, null, null, null, null, null, null, null, 2, null ], [ new Date("2023-04-22T22:00:00.000Z").toLocaleDateString('hu-HU'), 1, 7, null, null, null, null, null, null, null, null, null ], [ new Date("2023-04-05T22:00:00.000Z").toLocaleDateString('hu-HU'), 11, 5, null, null, null, null, 1, null, null, null, null ], [ new Date("2023-04-16T22:00:00.000Z").toLocaleDateString('hu-HU'), 11, 3, null, 1, null, null, null, 2, null, null, null ], [ new Date("2023-04-20T22:00:00.000Z").toLocaleDateString('hu-HU'), 7, 10, 1, null, null, null, null, null, null, null, null ], [ new Date("2023-04-10T22:00:00.000Z").toLocaleDateString('hu-HU'), 2, 5, null, 1, 2, null, null, null, null, null, null ], [ new Date("2023-04-27T22:00:00.000Z").toLocaleDateString('hu-HU'), 5, 3, 1, null, null, null, null, null, 1, null, null ], [ new Date("2023-04-24T22:00:00.000Z").toLocaleDateString('hu-HU'), 2, 11, null, null, null, null, null, null, null, null, null ], [ new Date("2023-04-13T22:00:00.000Z").toLocaleDateString('hu-HU'), 4, 7, null, null, null, null, null, null, null, null, null ], [ new Date("2023-04-02T22:00:00.000Z").toLocaleDateString('hu-HU'), 1, 5, null, 1, null, null, 2, null, null, null, null ], [ new Date("2023-04-07T22:00:00.000Z").toLocaleDateString('hu-HU'), 2, 7, null, null, null, null, null, null, null, null, null ], [ new Date("2023-04-21T22:00:00.000Z").toLocaleDateString('hu-HU'), null, 5, null, null, null, null, null, null, null, null, null ], [ new Date("2023-04-09T22:00:00.000Z").toLocaleDateString('hu-HU'), 2, 4, null, null, null, null, null, null, null, null, null ], [ new Date("2023-04-19T22:00:00.000Z").toLocaleDateString('hu-HU'), 3, 7, null, null, null, null, null, null, null, null, null ], [ new Date("2023-04-15T22:00:00.000Z").toLocaleDateString('hu-HU'), 1, 5, null, null, null, null, null, null, null, null, null ] ] ;


function drawChart()
{
    var dataTable = new google.visualization.DataTable();
    var chart = new google.visualization.ColumnChart(document.getElementById("chart"));
    headers.forEach(function (element) { dataTable.addColumn(element.columnType, element.columnName); });
    dataTable.addRows(data);
    chart.draw(dataTable, options);
}

方法二：配置柱子宽度参数 #

保留日期轴类型，通过bar.groupWidth限制柱子最大宽度，同时指定hAxis的ticks确保所有日期都显示：

修改后的options部分：

options = { 
    "isStacked": true, 
    "hAxis": { 
        "title": "Nap",
        // 指定所有数据中的日期作为刻度，确保每个日期都显示
        "ticks": data.map(row => row[0])
    }, 
    "vAxis": { "title": "Darab" }, 
    "chartArea": { "top": 20, "height": "75%" }, 
    "colorAxis": { "legend": { "position": "bottom" } },
    // 设置柱子组宽度为分类间隔的75%，避免重叠
    "bar": { "groupWidth": "75%" }
} ;

效果说明 #

• 方法一更适合无需日期轴连续特性的场景，每个日期独立显示，宽度均匀。
• 方法二则保留日期轴的时间特性，同时通过参数控制避免柱子重叠。

内容的提问来源于stack exchange，提问作者Feri