Question

我正在使用nivo response-bar在我的应用中添加一个情节。我被要求在同一个图表上添加一行显示累计总数。有没有办法做到这一点？从文档中我正在努力找出如何做到这一点。

这是我到目前为止的代码（出于安全原因，我对轴标签和函数名称进行了模糊处理！）

class CChart extends React.Component {
   render = () => {
     return (
       <div style={{ height: '40em' }}>
         <h3 className='text-center'>C</h3>
         <ResponsiveBar
           margin={{ top: 20, right: 0, bottom: 60, left: 80 }}
           data={this.props.results}
           indexBy='year'
           colorBy={() => '#1f77b4'}
           keys={['C']}
           enableLabel={false}
           axisLeft={{
             legend: 'C(millions)',
             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'
             }
           }}
           tooltipFormat={value => value.toLocaleString()}
           animate={false}
           markers={[
             { axis: 'y', value: 0 }
           ]}
         />
       </div>
     )
   }

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

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

Answer 1

目前无法（https://github.com/plouc/nivo/issues/139）

Answer 2

根据@plouc（Nivo 库的创始人）的说法，截至 2018 年 9 月，您应该能够绘制图表。
https://github.com/plouc/nivo/issues/139
（向下滚动至 9 月 12 日）

Nivo条形图 - 添加共享的y轴？

2 个答案: