react-vis实现单X轴多Y轴柱状图的技术求助

要在react-vis里实现单X轴对应Y、Y1两个Y值的图表，核心是为每组Y值单独渲染VerticalBarSeries，同时调整数据格式与样式避免柱子重叠。以下是具体解决方案：

关键修改点 #

• 数据适配：react-vis的系列组件要求每个数据点包含x和y字段，因此需要将原数据中的y1字段映射为新的y字段，生成第二组数据。
• 多系列渲染：添加第二个VerticalBarSeries组件，传入处理后的Y1数据。
• 样式调整：通过调整barWidth和xOffset实现并列柱状效果，避免两组柱子重叠；为不同系列设置差异化颜色便于区分。
• 轴与网格优化：合并重复的网格线配置，统一Y轴刻度（或添加双Y轴，根据需求选择）。

修改后的完整代码 #

import { CSSProperties, FunctionComponent } from 'react';
import {
    XYPlot,
    XAxis,
    YAxis,
    VerticalGridLines,
    HorizontalGridLines,
    VerticalBarSeries,
} from 'react-vis';
import { BaseChart } from './data/interfaces';

interface BarChartProps extends BaseChart {
    colorValue?: string;
    color?: string;
    style?: CSSProperties;
    barWidth?: number;
    stroke?: string;
    fill?: string;
    // 新增：允许为第二组数据配置颜色
    fillY1?: string;
    strokeY1?: string;
}

const BarChart: FunctionComponent<BarChartProps> = ({
    colorRange,
    colorValue,
    color,
    data,
    style,
    barWidth = 0.3,
    width = 450,
    height,
    stroke,
    fill = '#C6E2DD',
    fillY1 = '#FFB3BA',
    strokeY1 = '#FF6961',
}) => {
    if (!data?.length) return null;

    // 处理Y轴数据：保留原x和y
    const yData = data.map(item => ({
        x: item.x,
        y: item.y
    }));

    // 处理Y1轴数据：将y1转为y，保留x
    const y1Data = data.map(item => ({
        x: item.x,
        y: item.y1
    }));

    // 合并两组Y值作为Y轴刻度，避免重复
    const allYValues = [...new Set([...yData.map(d => d.y), ...y1Data.map(d => d.y)])].sort((a, b) => a - b);

    return (
        <XYPlot
            margin={{ bottom: 30, left: 20, top: 15, right: 20 }}
            xType='ordinal'
            width={width}
            height={height}
        >
            <VerticalGridLines />
            <HorizontalGridLines tickValues={allYValues} />
            <XAxis />
            {/* 主Y轴，显示所有刻度 */}
            <YAxis tickValues={allYValues} tickSize={12} />
            {/* 可选：添加右侧Y轴，如果需要双Y轴展示 */}
            {/* <YAxis orientation="right" tickValues={allYValues} tickSize={12} /> */}

            {/* 第一组柱状图：Y值 */}
            <VerticalBarSeries
                barWidth={barWidth}
                fill={fill}
                stroke={stroke}
                data={yData}
                // 设置x偏移，让两组柱子并列
                xOffset={-barWidth / 2}
            />

            {/* 第二组柱状图：Y1值 */}
            <VerticalBarSeries
                barWidth={barWidth}
                fill={fillY1}
                stroke={strokeY1}
                data={y1Data}
                xOffset={barWidth / 2}
            />
        </XYPlot>
    );
};

export default BarChart;

代码解释 #

1. 数据处理：分别将原数据的y和y1字段映射为符合react-vis要求的{x, y}格式数据组，确保每个系列能正确识别数据。
2. 并列柱状配置：通过xOffset属性，给两组柱子分别设置正负偏移，配合合适的barWidth，实现同一X轴标签下两组柱子并列展示。
3. 样式区分：为两组柱子设置不同的填充色和描边色，方便用户区分数据系列。
4. 轴优化：合并两组Y值生成统一的刻度值，避免网格线重复，让图表更整洁；如果需要双Y轴展示，可以取消注释右侧Y轴的代码。

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