Chart.js 3.5.1横向柱状图如何添加垂直和水平滚动条

实现横向柱状图双滚动的修改方案 #

核心逻辑是通过外层容器固定可视区域、设置溢出滚动，同时强制Canvas画布尺寸大于可视区域、固定每个柱状条高度，避免大数据量下柱子被压缩。

1. 核心修改点

• 给图表外层容器设置固定宽高，开启overflow: auto实现滚动效果
• 关闭Chart.js的宽高比例锁定，让手动设置的Canvas尺寸生效
• 给柱状条设置固定高度，保证1000条数据的每个柱子都清晰可辨

2. 完整可运行代码

<!DOCTYPE html>
<html>
<head>
  <!-- 导入Chart.js相关依赖 -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js@3.5.1/dist/chart.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@2.0.0/dist/chartjs-adapter-date-fns.bundle.js"></script>
  <style>
    .col4{
      position: relative;
      min-height: 1px;
      float: left;
      padding-right: 10px;
      padding-left: 10px;
      width: 75%;
    }
    .chart_box {
      box-sizing: border-box;
      margin: 15px 0 15px 0;
      /* 固定可视区域大小，开启滚动 */
      width: 800px;
      height: 400px;
      overflow: auto;
    }
    #chart_01 {
      /* Canvas尺寸远大于可视区域，支撑滚动内容 */
      width: 1200px; /* 宽度按需设置，超出就会出水平滚动 */
      height: 20000px; /* 1000条数据，每条柱子20px+间距，总高度按需调整 */
    }
  </style>
</head>
<body>
  <div class="col4">
    <div class="chart_box">
      <canvas id="chart_01"></canvas>
    </div>
  </div>
  <script> 
    // 生成测试数据
    const labels = [];
    var mydata = [];
    for (let i=0; i<1000; i++)
    {
        labels.push("item-"+(i).toString());
        mydata.push((i-500)*(i-500));
    }
    const data = {
        labels: labels,
        datasets: [
            {
                label: "Data",
                data: mydata,
                backgroundColor: 'rgb(255, 199, 132)',
            },
        ]
    };
    const config = {
        type: 'bar',
        data: data,
        options: {
            indexAxis: 'y',
            plugins: {
                title: {
                    display: true,
                    text: 'Chart.js Bar Chart - Stacked'
                },
            },
            responsive: true,
            // 关闭宽高比例锁定，允许自定义Canvas尺寸
            maintainAspectRatio: false,
            scales: {
                x: {
                    stacked: true,
                },
                y: {
                    stacked: true,
                    // 固定每个柱子的高度，避免压缩
                    barThickness: 20
                }
            }
        }
    };
    // 渲染图表
    var myChart = new Chart(
        document.getElementById('chart_01').getContext("2d"),
        config
    );
  </script>
</body>
</html>

3. 自定义调整说明

• 如果需要调整可视区域大小，直接修改.chart_box的width和height属性即可
• 如果柱子数量变化，同步调整#chart_01的height值，计算公式可参考：总高度 = 柱子数量 * 单根柱子高度 + 100px（预留图表上下边距）
• 如果需要更宽的水平滚动区域，调大#chart_01的width值即可

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