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

向<XYPlot>标签添加dontCheckIfEmpty属性(如为真，默认为假)。

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