Charts.js 超过50条横向柱状条时高度异常如何修复

针对Chart.js 2.x版本横向柱状图数据量过大时柱状条被压缩无法辨识的问题，最优方案如下： #

核心思路 #

固定单根柱状条的高度，取消图表默认宽高比限制，通过外层容器滚动容纳所有内容，避免柱状条被自动压缩。 #

具体修改步骤 #

1. 新增CSS样式配置
   给外层容器和canvas添加样式，固定可视区域高度同时允许滚动，指定canvas最小高度：

.graph_container {
  width: 100%;
  height: 600px; /* 可视区域高度，可自行调整 */
  overflow-y: auto;
}
#Chart1 {
  min-height: 3000px; /* 最小高度计算公式：单根柱子高度*总条数 + 上下padding，100条的话按单根30px算就是3000px，可根据实际条数动态计算 */
  width: 100%;
}

2. 修改Chart.js配置
   在options中添加宽高比控制、固定柱状条厚度的配置：

var barOptions_stacked = {
    // 新增以下2行配置
    maintainAspectRatio: false, // 取消强制宽高比限制
    responsive: true,
    tooltips: {
        enabled: false
    },
    hover :{
        animationDuration:0
    },
    scales: {
        xAxes: [{
            ticks: {
                beginAtZero:true,
                fontFamily: "'Open Sans Bold', sans-serif",
                fontSize:11
            },
            scaleLabel:{
                display:false
            },
            gridLines: {
            }, 
            stacked: true
        }],
        yAxes: [{
            // 新增以下3行配置，固定柱状条厚度
            barThickness: 20, // 单根柱状条的高度固定为20px，可自行调整
            barPercentage: 0.8,
            categoryPercentage: 0.8,
            gridLines: {
                display:false,
                color: "#fff",
                zeroLineColor: "#fff",
                zeroLineWidth: 0
            },
            ticks: {
                fontFamily: "'Open Sans Bold', sans-serif",
                fontSize:11
            },
            stacked: true
        }]
    },
    legend:{
        display:false
    },
};

3. 可选优化：如果数据条数超过200条，建议新增分页、关键词筛选功能，减少单次渲染的数据量，避免页面卡顿。

动态高度适配优化 #

如果数据条数是动态变化的，可以在渲染图表前通过数据长度自动计算canvas最小高度，无需手动调整：

const barCount = myChart.data.labels.length;
const minHeight = barCount * 30 + 50; // 单根柱子占30px，上下预留50px边距
document.getElementById('Chart1').style.minHeight = minHeight + 'px';
myChart.update(); // 触发图表重绘更新

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