Bar chart全负值场景下柱体填充方向异常如何调整

问题表现 #

渲染全负值数据集的柱状图时，柱体默认以0刻度为基线向负方向延伸，手动调整Y轴min/max参数无法修改该渲染规则。预期效果为柱体以Y轴最小值（即X轴与Y轴的交叉位置）为起点，向对应数值方向绘制，和全正值场景下的柱状图视觉逻辑一致。
当前默认渲染效果：

解决方法 #

核心逻辑是修改柱状图的渲染基线配置，不要仅调整Y轴数值范围，不同主流可视化库的配置方式如下：

• Chart.js
  在对应数据集的配置项中设置base参数，取值和你配置的Y轴最小值保持一致即可，示例代码：

  const chart = new Chart(document.getElementById('canvas'), {
    type: 'bar',
    data: {
      labels: ['类别1', '类别2', '类别3', '类别4'],
      datasets: [{
        data: [-35, -72, -28, -90],
        // 基线与Y轴最小值对齐
        base: -100,
        backgroundColor: '#4285f4'
      }]
    },
    options: {
      scales: {
        y: {
          min: -100,
          max: 0
        }
      }
    }
  })
  

• ECharts
  5.x及以上版本直接在系列配置中设置base参数即可，同时关闭Y轴0刻度对齐配置，让X轴落在Y轴最小值位置：

  const option = {
    xAxis: {
      type: 'category',
      data: ['类别1', '类别2', '类别3', '类别4'],
      position: 'bottom'
    },
    yAxis: {
      type: 'value',
      min: -100,
      max: 0,
      axisLine: {
        // 关闭坐标轴强制对齐0刻度
        onZero: false
      }
    },
    series: [{
      type: 'bar',
      data: [-35, -72, -28, -90],
      // 配置柱体渲染基线为Y轴最小值
      base: -100
    }]
  }
  

  4.x及以下旧版本不支持直接配置base，可以通过数值偏移实现：给所有负值加上Y轴范围的绝对值（如Y轴范围-100_{0，就给所有数值加100，转为0}72的正值），渲染完成后自定义Y轴标签格式化函数，将显示值减100还原为负值即可。

• AntV G2/G2Plot
  直接在柱图系列配置中设置base参数为Y轴最小值，逻辑和上述两个库一致。

提示：配置完成后如果柱体宽度、间距显示异常，微调barWidth、barGap参数即可适配。

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