reactjs - React-Vis - 如何渲染空白图表区域？

Question

我正在开发一个react-vis图表，它将动态更新当用户单击该系列的图例项时显示的数据。

如果用户单击所有系列的单击，我渲染的 JSX 基本上如下所示:

  <div>
    <XYPlot
      xDomain={paretoOrder}
      margin={{left: 150, bottom: 150}}
      width={450}
      height={450}
      xType="ordinal"
      stackBy="y"
    >
      <VerticalGridLines />
      <HorizontalGridLines />
      <XAxis
        tickLabelAngle={-45}
      />
      <YAxis 
        tickFormat={ tick => translator.formatTime(tick, {hideZero: true})}
      />
      <VerticalBarSeries
        data={[]}
      />
    </XYPlot> 
    <DiscreteColorLegend
      orientation="horizontal"
      width={300}
      items={legendItems}
      onItemClick={this.onLegendClick}
    />
  </div>

我希望这仍然会渲染轴、网格线等，但整个图表将从 DOM 中删除。如何渲染带有空数据的图表，但将轴、网格线等保留在 DOM 中？

Answer 1

添加dontCheckIfEmpty prop(为 true，默认为 false)到 <XYPlot>标签。

 <XYPlot
   dontCheckIfEmpty
 >
   <XAxis/>
   <YAxis/>
   <VerticalBarSeries
      data={data}
   />
   <VerticalGridLines />
   <HorizontalGridLines />
 </XYPlot>