如何为Nivo柱状图添加共享Y轴及累计总和折线？

嘿，这两个问题都是用Nivo做可视化时非常常见的实战需求，我来一步步帮你解决：

如果是要让多个柱状图共用同一个Y轴，Nivo的ResponsiveGroup组件就是专门干这个的——它能把多个图表组件（比如多组Bar）组合在同一画布下，自动同步坐标轴配置。

核心思路是：把所有需要共享Y轴的Bar组件放到ResponsiveGroup内部，然后把Y轴的配置（axisLeft）放到Group的props里，而不是每个Bar单独设置。这样所有子图表都会使用同一个Y轴，刻度、范围完全同步。

举个极简示例：

import { ResponsiveGroup, ResponsiveBar } from '@nivo/bar'

// 假设你有多组需要对比的柱状图数据
const chartData = [/* 你的业务数据 */]

const SharedYAxisBarChart = () => (
  <ResponsiveGroup
    margin={{ top: 20, right: 50, bottom: 60, left: 80 }}
    // 统一配置共享的Y轴
    axisLeft={{
      legend: '数值(百万)',
      legendPosition: 'center',
      legendOffset: -60,
      tickSize: 5,
      tickPadding: 15,
      format: v => Math.floor(v / 1000000).toLocaleString()
    }}
    axisBottom={{
      legend: 'Year',
      legendPosition: 'center',
      legendOffset: 50,
      tickSize: 5,
      tickPadding: 15
    }}
  >
    <ResponsiveBar
      data={chartData}
      indexBy='year'
      keys={['C']}
      colorBy={() => '#1f77b4'}
      enableLabel={false}
    />
    <ResponsiveBar
      data={chartData}
      indexBy='year'
      keys={['D']}
      colorBy={() => '#ff7f0e'}
      enableLabel={false}
    />
  </ResponsiveGroup>
)

这样两组柱状图就会共用左侧的Y轴，完全同步刻度和数值范围。

要在柱状图上叠加折线，Nivo的ResponsiveComposite组件是最佳选择——它允许你在同一画布上组合不同类型的图表（Bar + Line），并且天然支持坐标轴共享。

首先你需要先计算累计总和数据，然后把Bar和Line组件都放到ResponsiveComposite中，配置好对应的数据源和坐标轴映射。

基于你提供的代码，修改后的完整版本如下：

import { ResponsiveComposite, ResponsiveBar, ResponsiveLine } from '@nivo/bar'
import PropTypes from 'prop-types'

class CChart extends React.Component {
  render = () => {
    // 先计算每个年份的累计总和
    const cumulativeData = this.props.results.reduce((acc, curr, index) => {
      const prevTotal = index > 0 ? acc[index - 1].cumulative : 0
      acc.push({
        year: curr.year,
        cumulative: prevTotal + curr.C
      })
      return acc
    }, [])

    return (
      <div style={{ height: '40em' }}>
        <h3 className='text-center'>C</h3>
        <ResponsiveComposite
          margin={{ top: 20, right: 50, bottom: 60, left: 80 }}
          // 统一配置共享的坐标轴
          axisLeft={{
            legend: 'C(百万)',
            legendPosition: 'center',
            legendOffset: -60,
            tickSize: 5,
            tickPadding: 15,
            format: v => Math.floor(v / 1000000).toLocaleString()
          }}
          axisBottom={{
            legend: 'Year',
            legendPosition: 'center',
            legendOffset: 50,
            tickSize: 5,
            tickPadding: 15,
            tickValues: this.props.results.map(x => x.year).filter(x => x % 5 === 0)
          }}
          theme={{ axis: { fontSize: '1em', legendFontSize: '1.2em' }}}
        >
          {/* 原有的柱状图 */}
          <ResponsiveBar
            data={this.props.results}
            indexBy='year'
            colorBy={() => '#1f77b4'}
            keys={['C']}
            enableLabel={false}
            tooltipFormat={value => value.toLocaleString()}
            animate={false}
            markers={[{ axis: 'y', value: 0 }]}
          />
          {/* 累计总和折线 */}
          <ResponsiveLine
            data={cumulativeData}
            indexBy='year'
            keys={['cumulative']}
            colorBy={() => '#2ca02c'}
            curve='monotoneX' // 让折线更平滑自然
            enablePoints={true} // 显示每个数据点
            pointSize={6}
            tooltipFormat={value => value.toLocaleString()}
            animate={false}
          />
        </ResponsiveComposite>
      </div>
    )
  }

  static propTypes = {
    results: PropTypes.arrayOf(PropTypes.shape({
      year: PropTypes.string.isRequired,
      C: PropTypes.number.isRequired
    })).isRequired
  }

  static mapStateToProps = state => ({ results: getCResults(state) })
}

关键注意点：

• 用ResponsiveComposite包裹Bar和Line，统一管理画布和坐标轴，避免组件错位
• 用reduce遍历原数据，逐步累加得到每个年份的累计值，保证折线数据和柱状图的时间轴对齐
• Line组件的indexBy要和Bar保持一致（都是year），这样坐标轴才能完美匹配
• 可以自定义折线的颜色、曲线类型、数据点样式，让可视化更直观

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