求助：如何用Nivo实现Responsive Bar&Line混合图表？折线不显示

开发者阿泽

2026-7-27

Nivo Responsive Bar与Line混合图表折线无法显示排查求助

我参考Nivo官方文档及相关Codesandbox示例，在React项目中尝试实现Responsive Bar与Line的混合图表，但折线始终无法显示。以下是我的相关信息，希望有人帮忙排查问题：

数据结构

// 请粘贴你的实际数据结构代码
示例：
const chartData = [
  {
    "period": "Q1",
    "revenue": 15000,
    "users": 800
  },
  {
    "period": "Q2",
    "revenue": 22000,
    "users": 1200
  },
  // 更多数据项...
];

完整实现代码

// 请粘贴你的完整React组件代码
示例：
import React from 'react';
import { ResponsiveBar } from '@nivo/bar';
import { ResponsiveLine } from '@nivo/line';

export default function MixedChart() {
  const data = [/* 你的数据 */];

  return (
    <div style={{ height: '500px', position: 'relative' }}>
      <ResponsiveBar
        data={data}
        indexBy="period"
        keys={['revenue']}
        margin={{ top: 50, right: 130, bottom: 50, left: 60 }}
        // 其他柱状图配置项...
      />
      <ResponsiveLine
        data={data}
        indexBy="period"
        keys={['users']}
        margin={{ top: 50, right: 130, bottom: 50, left: 60 }}
        // 其他折线图配置项...
      />
    </div>
  );
}