React Chart JS 2柱状图如何自定义柱体剩余空白区域的样式

要实现柱状图剩余高度的自定义背景效果，react-chartjs-2没有单独的对应配置项，你可以通过新增背景数据集+开启轴堆叠的方式实现，具体操作如下：

• 新增第二个数据集作为背景层，所有数据值设置为y轴的最大值（可以是你当前数据集的最大值，也可以是自定义的固定最大值），将背景色设置为你想要的自定义背景样式，把这个数据集放在原有数据集的前面，保证原有柱体叠在背景之上。
• 在scales的x、y轴配置中新增stacked: true，开启柱体堆叠模式。
• 可选：调整barPercentage和categoryPercentage参数，保证背景柱和实际数据柱的宽度完全对齐。

修改后的完整代码示例：

const colorCode = '#1478BD';
// 自定义背景色，可按需调整
const bgBarColor = '#E0EEF8';
// 可自定义y轴最大值，这里取当前数据的最大值
const maxYValue = Math.max(...[65, 59, 80, 81, 56, 65, 59, 80, 81, 56, 40, 56]);

const state = {
  data: {
    labels: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
    datasets: [
      // 新增的背景柱数据集
      {
        fill: true,
        label: null,
        backgroundColor: bgBarColor,
        borderWidth: 0,
        // 所有数据设为y轴最大值
        data: new Array(12).fill(maxYValue),
        // 保证和实际柱宽一致
        barPercentage: 0.6,
        categoryPercentage: 0.8
      },
      // 原有实际数据数据集
      {
        fill: true,
        label: null,
        backgroundColor: colorCode,
        borderColor: colorCode,
        borderWidth: 2,
        data: [65, 59, 80, 81, 56, 65, 59, 80, 81, 56, 40, 56],
        barPercentage: 0.6,
        categoryPercentage: 0.8
      }
    ]
  },
  options: {
    plugins: {
      legend: {
        display: false
      },
    },
    scales: {
      x: {
        grid: {
          display: false
        },
        beginAtZero: false,
        ticks: {
          color: colorCode,
        },
        // 开启x轴堆叠
        stacked: true
      },
      y: {
        grid: {
          display: false,
        },
        beginAtZero: true,
        ticks: {
          color: colorCode,
        },
        // 开启y轴堆叠
        stacked: true
      }
    },
  }
}

<Bar
  height={170}
  data={state.data}
  options={state.options}
/>

如果需要调整背景的样式，直接修改背景数据集的backgroundColor、borderColor等属性即可。如果你的y轴设置了固定最大值，直接把maxYValue替换成你的固定值即可，不需要动态计算。

内容的提问来源于stack exchange，提问作者Wai Yan Hein