ChartJS实现横向滚动柱状图时列数过多无法全部渲染问题求助

导致图表列数过多时无法渲染全部列的核心问题有4个：

• 未关闭ChartJS默认的响应式适配配置，图表会自动压缩宽度适配外层父容器，列数过多时会被直接挤到不可见
• 调用addData新增300条数据后，未执行chart.update()触发图表重绘，新增数据未被渲染
• 初始化生成100条数据时，未提前设置chartAreaWrapper2的对应宽度，初始100条数据就已经被压缩在固定1200px宽度的canvas中
• onProgress回调中的clearRect参数未适配设备像素比，高DPI屏幕下会误擦除左侧已渲染的列内容

1. 修改Chart配置 #

在图表options中新增以下配置，关闭自动响应式适配，同时调整列宽参数避免挤压：

options: {
    // 新增以下两行
    responsive: false,
    maintainAspectRatio: false,
    tooltips: {
        // 原有配置保持不变
        titleFontSize: 0,
        titleMarginBottom: 0,
        bodyFontSize: 12
    },
    scales: {
        xAxes: [{
            // 新增以下两行控制列宽
            barPercentage: 0.8,
            categoryPercentage: 0.9,
            ticks: {
                fontSize: 12,
                display: false
            }
        }],
        // yAxes原有配置保持不变
        yAxes: [{
            ticks: {
                fontSize: 12,
                beginAtZero: true
            }
        }]
    }
    // 其他原有配置保持不变
}

2. 修复addData逻辑 #

在addData循环结束后新增图表更新调用，同时提前计算初始容器宽度：

// 初始化图表前先设置初始容器宽度
$('.chartAreaWrapper2').width(chartData.labels.length * 60);

function addData(numData, chart) {
    for (var i = 0; i < numData; i++) {
        chart.data.datasets[0].data.push(Math.random() * 100);
        chart.data.labels.push("Label" + i);
        var newwidth = $('.chartAreaWrapper2').width() + 60;
        $('.chartAreaWrapper2').width(newwidth);
    }
    // 新增此行触发重绘
    chart.update();
}

3. 修复onProgress擦除逻辑 #

适配设备像素比，避免误擦除内容：

onProgress: function () {
    if (rectangleSet === true) {
        var scale = window.devicePixelRatio;
        var copyWidth = chartTest.scales['y-axis-0'].width;
        var copyHeight = chartTest.scales['y-axis-0'].height + chartTest.scales['y-axis-0'].top + 10;
        var sourceCtx = chartTest.chart.canvas.getContext('2d');
        // 修改此行参数适配像素比
        sourceCtx.clearRect(0, 0, copyWidth * scale, copyHeight * scale);
    }
}

4. 补充CSS配置 #

给内层容器设置固定高度，避免内容溢出：

.chartAreaWrapper2 {
    height: 300px;
}

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