ApexChart柱状图缩放时自动调整列宽的实现方法咨询

核心实现逻辑为监听图表的缩放事件，根据当前可视区域的数据条数动态调整柱宽，即可实现缩放时柱宽自适应且不重叠的效果，具体修改如下：

修改点说明 #

• 修正原代码配置缺陷：原配置中xaxis.categories仅设置了7个值，和series中100条数据的长度不匹配，需要补全对应长度的分类值，否则缩放逻辑会出现异常
• 给图表配置添加zoomed事件监听，在回调中计算可视区间的条目数量，按区间映射柱宽比例
• 动态更新柱宽配置后触发图表重绘即可生效

完整可运行代码 #

<!DOCTYPE html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Bar with Custom DataLabels</title>
  <style>
    #chart {
      max-width: 650px;
      margin: 35px auto;
    }
  </style>
  <script>
    window.Promise ||
      document.write(
        '<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"><\/script>'
      );
    window.Promise ||
      document.write(
        '<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill@1.2.20171210/classList.min.js"><\/script>'
      );
    window.Promise ||
      document.write(
        '<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"><\/script>'
      );
  </script>
  <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
  <script>
    var _seed = 42;
    Math.random = function () {
      _seed = (_seed * 16807) % 2147483647;
      return (_seed - 1) / 2147483646;
    };
  </script>
</head>
<body>
  <div id="chart"></div>
  <script>
    // 补全categories，和series数据长度一致（共100条）
    const categories = Array.from({length: 100}, (_, i) => i + 1)
    var options = {
      series: [
        {
          name: 'Net Profit',
          data: [
            95, 4, 48, 95, 71, 16, 44, 98, 75, 94, 28, 61, 76, 1, 54, 90, 19,
            5, 37, 57, 88, 31, 41, 59, 27, 96, 20, 65, 84, 49, 67, 73, 78, 22,
            75, 82, 67, 16, 4, 95, 84, 100, 76, 88, 66, 65, 14, 15, 46, 23,
            48, 91, 23, 18, 32, 15, 71, 73, 28, 2, 61, 21, 63, 30, 35, 62, 29,
            11, 71, 95, 43, 9, 59, 20, 85, 46, 59, 82, 4, 54, 60, 11, 15, 51,
            34, 12, 19, 45, 2, 89, 3, 6, 60, 17, 57, 16, 90, 13, 46, 8,
          ],
        },
        {
          name: 'Revenue',
          data: [
            97, 46, 49, 16, 11, 41, 36, 38, 16, 89, 71, 42, 68, 79, 52, 64,
            40, 38, 29, 32, 50, 74, 88, 76, 65, 50, 66, 56, 42, 45, 46, 39,
            29, 57, 68, 75, 34, 5, 100, 47, 79, 76, 53, 78, 39, 46, 13, 80,
            22, 61, 67, 61, 17, 86, 65, 76, 82, 63, 27, 58, 64, 6, 100, 39,
            25, 39, 14, 79, 12, 44, 9, 72, 63, 96, 27, 77, 70, 36, 100, 96, 5,
            36, 89, 25, 67, 53, 61, 86, 64, 46, 52, 41, 56, 1, 93, 45, 49, 23,
            35, 11,
          ],
        },
        {
          name: 'Free Cash Flow',
          data: [
            20, 32, 92, 20, 36, 25, 4, 61, 77, 49, 11, 74, 15, 21, 49, 52, 11,
            12, 12, 21, 78, 47, 95, 6, 68, 51, 66, 29, 67, 22, 100, 66, 42,
            48, 8, 94, 87, 74, 43, 72, 90, 34, 66, 23, 82, 79, 64, 79, 89, 53,
            25, 70, 25, 48, 43, 11, 17, 63, 30, 100, 79, 29, 41, 3, 99, 78,
            93, 53, 12, 99, 30, 76, 30, 18, 5, 11, 16, 38, 49, 87, 21, 67, 41,
            28, 13, 82, 1, 88, 79, 53, 3, 63, 61, 4, 5, 75, 83, 62, 17, 43,
          ],
        },
      ],
      chart: {
        height: 350,
        type: 'bar',
        // 添加缩放事件监听
        events: {
          zoomed: function(chartContext, {xaxis}) {
            // 计算当前可视区域的条目数量
            const visibleCount = Math.ceil(xaxis.max) - Math.floor(xaxis.min) + 1
            let newColumnWidth
            // 按可视条目数映射柱宽，可根据实际需求调整比例
            if (visibleCount <= 10) {
              newColumnWidth = '75%'
            } else if (visibleCount <= 30) {
              newColumnWidth = '60%'
            } else if (visibleCount <= 60) {
              newColumnWidth = '45%'
            } else {
              newColumnWidth = '30%'
            }
            // 更新柱宽配置
            chart.updateOptions({
              plotOptions: {
                bar: {
                  columnWidth: newColumnWidth
                }
              }
            })
          }
        }
      },
      plotOptions: {
        bar: {
          // 初始柱宽，和可视条目最多时的配置一致
          columnWidth: '30%',
        },
      },
      dataLabels: {
        enabled: false,
      },
      stroke: {
        width: 2,
      },
      grid: {
        row: {
          colors: ['#fff', '#f2f2f2'],
        },
      },
      xaxis: {
        labels: {
          rotate: -45,
        },
        // 使用补全后的categories
        categories: categories,
        tickPlacement: 'on',
      },
      yaxis: {
        title: {
          text: 'Servings',
        },
      },
      fill: {
        type: 'gradient',
        gradient: {
          shade: 'light',
          type: 'horizontal',
          shadeIntensity: 0.25,
          gradientToColors: undefined,
          inverseColors: true,
          opacityFrom: 0.85,
          opacityTo: 0.85,
          stops: [50, 0, 100],
        },
      }
    };

    var chart = new ApexCharts(document.querySelector('#chart'), options);
    chart.render();
  </script>
</body>

你可以根据实际的设计需求，调整不同可视条目区间对应的柱宽比例，保证柱状条始终保留间隙不重叠。

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