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标记中添加<XYPlot>属性（默认为false）。

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

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

1 个答案: