Chart.js如何实现非堆叠的两个柱状图重叠显示效果

核心配置逻辑 #

要实现两个柱状图同位置重叠、而非并排/堆叠效果，无需复杂改造，核心配置规则如下：

• 关闭x/y轴的stacked堆叠属性，避免柱子数值自动累加
• 给所有需要重叠的数据集设置相同的categoryPercentage: 1、barPercentage: 1，让柱子占满单个分类的全部宽度，同分类下的柱子就会完全重叠，不会自动并排偏移
• 注意数据集渲染顺序：后声明的数据集默认层级更高，会盖在先声明的数据集上层，灰色背景柱放在第二个数据集的位置可直接作为绿色数值柱的底衬，也可通过order属性手动调整层级

效果不生效的原因 #

• <Bar />组件写法错误：原代码把data、options属性写在了标签闭合位置外，当成了子元素解析，所有配置根本没有传入组件
• 缺少控制柱子宽度占比的categoryPercentage、barPercentage参数，同分类柱子默认会各占一半宽度并排显示
• 若使用v4及以上版本的react-chartjs-2，未手动注册Chart.js核心组件也会导致配置异常

修正后完整代码 #

JSX 部分 #

import React, { useEffect } from 'react';
import { Bar } from 'react-chartjs-2';
import useWindowWidth from 'wa-shared/src/hooks/useWindowWidth';
// v4及以上版本react-chartjs-2需手动注册组件
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Tooltip,
  Legend,
} from 'chart.js';

ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Tooltip,
  Legend
);

const state = {
  count: 0,
  data: {
    labels: [
      ['Total Users'],
      ['Users with', 'Active', 'Session'],
      ['Created 1', 'or More', 'Videos'],
      ['Shared 1', 'or More', 'Videos']
    ],
    datasets: [
      {
        backgroundColor: '#26863D',
        data: [70, 66, 57, 1],
        barThickness: 35,
        categoryPercentage: 1,
        barPercentage: 1,
        order: 0
      },
      {
        backgroundColor: '#F2F2F2',
        data: [70, 70, 70, 70],
        borderRadius: 5,
        barThickness: 35,
        categoryPercentage: 1,
        barPercentage: 1,
        order: 1
      }
    ]
  }
}

const App = () => {
  const width = useWindowWidth();
  useEffect(() => {});
  
  const chartOptions = {
    scales: {
      x: {
        stacked: false,
        grid: {
          display: false,
        },
        offset: true,
        ticks: {
          maxRotation: 0,
          minRotation: 0,
          font: {
            size: 8,
          }
        },
      },
      y: {
        stacked: false,
        min: 0,
        max: 100,
        ticks: {
          color: '#8A8A8A',
          font: {
            size: 8,
          },
          stepSize: 25,
          callback: function(value) {
            return value + "%"
          },
        },
        title: {
          display: true,
          text: "Percentage",
        },
        grid: {
          display: false,
        }
      }
    },
    plugins: {
      legend: {
        display: false,
      },
    },
    responsive: true
  }

  return (
    <div className='singlebar-chart' id="barchart">
      <Bar data={state.data} options={chartOptions} />
    </div>
  )
}

export default App;

CSS 部分 #

.singlebar-chart{
    width: 95%;
}

补充说明：如果使用2.x版本的Chart.js，无需手动注册组件，y轴标签配置改回原写法的scaleLabel、ticks颜色改回fontColor即可正常运行。

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