React-Vis - Как отобразить пустую область графика? - PullRequest
Новая
       12

React-Vis - Как отобразить пустую область графика?

0 голосов
/ 08 июня 2018

Я работаю над диаграммой реагирования, которая будет динамически обновлять данные, отображаемые, когда пользователь нажимает на элемент легенды для этой серии или выключает его.

Если пользователь щелкает, он отключает всесерия 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?

1 Ответ

0 голосов
/ 15 мая 2019

Добавить dontCheckIfEmpty prop (как true, по умолчанию false) в тег <XYPlot>. 

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