Как отобразить новый элемент на щелчке бара перезаписей - PullRequest
Новая
       8

Как отобразить новый элемент на щелчке бара перезаписей

0 голосов
/ 11 октября 2018

Я реализовал гистограмму, используя recharts.Я хотел бы отобразить новый элемент div вне области диаграммы, когда я нажимаю на панель, которая отображает дополнительную информацию, связанную с панелью.Я добавил функцию, которая будет возвращать элемент div, который должен отображаться в событии onClick.

enter image description here

<BarChart width={1130} height={450} data={data}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="endTime" tickFormatter={time => moment.unix(time).format('DD MMM')} />
                    <YAxis />
                    <Tooltip content={this.renderTooltip} />
                    <Legend verticalAlign="top" height={36} />
                    <Brush dataKey='endTime' height={30} stroke="#1984CD" tickFormatter={time => moment.unix(time).format('DD MMM')} onChange={this.handleBrushChange.bind(this)} />
                    <Bar barSize={20} name="process duration" dataKey="duration" fill="#1984CD" onClick={this.onBarClick.bind(this)} />
                </BarChart>

onBarClick(bar) {
        console.log("bar clicked", bar);
        return (
            <div className='infoPanel'>
                <Box colorIndex="light-1" pad="small" margin="small">
                    <p>StartTime: {moment.unix(bar.startTime).format('MMM Do YYYY, h:mm:ss')}</p>
                    <p>EndTime: {moment.unix(bar.endTime).format('MMM Do YYYY, h:mm:ss')}</p>
                    <p>Event:  <span> {bar.aname}</span> {bar.evtime1}</p>
                    <p>Event: <span> {bar.aname2}</span>  {bar.evttime2}</p>
                    <p>Event: {bar.aname3} at {bar.evtime3}</p>
                </Box>
            </div>
        );
    }

.infoPanel {
  margin-top: 5em;
  color: #666;
  background-color: aquamarine;
}

Функция вызывается и работает правильно, но я не вижу элемента div нигде.Разве невозможно добавить новый элемент div без добавления нового компонента?

Ответы [ 2 ]

0 голосов
/ 10 июня 2019

Я нашел этот ответ, погугливая.Кредиты для автора не мои. 

   const { 
    ResponsiveContainer, RadialBarChart, RadialBar, Legend, Tooltip
 } = Recharts;

const data = [
    {fill:"#008744", name:"A", uv:"5870"},
  {fill:"#d0ed57", name:"B", uv:"1"},
];

function demoOnClick(e) {
    alert(e.name);
}

const SimpleBarChart = React.createClass({
    render () {
    return (
      <ResponsiveContainer width="100%" height="100%">
        <RadialBarChart width={500} height={300} cx={150} cy={150} innerRadius={20} outerRadius={140} barSize={10} data={data} onClick={demoOnClick} >
          <Legend align="left" verticalAlign="top" />
          <RadialBar className="clickable" minAngle={15} label background clockWise={true} dataKey="uv" />
          <Tooltip />
        </RadialBarChart>
      </ResponsiveContainer>
    );
  }
})

ReactDOM.render(
  <SimpleBarChart />,
  document.getElementById('container')
);

https://jsfiddle.net/ydycdLpx/5/

0 голосов
/ 11 октября 2018

В вашей ситуации вы возвращаете компонент, но нигде не визуализируете его.То, что вы могли бы сделать, - это условный рендеринг где-то в вашей DOM и использовать состояние, чтобы показать или нет то, что вы рендеринге.

Например, вы можете использовать эти два метода: 

onBarClick(bar) {
  this.setState({selectedBar : bar});
}

 renderSelectedBar(bar) {
    return (
        <div className='infoPanel'>
            <Box colorIndex="light-1" pad="small" margin="small">
                <p>StartTime: {moment.unix(bar.startTime).format('MMM Do YYYY, h:mm:ss')}</p>
                <p>EndTime: {moment.unix(bar.endTime).format('MMM Do YYYY, h:mm:ss')}</p>
                <p>Event:  <span> {bar.aname}</span> {bar.evtime1}</p>
                <p>Event: <span> {bar.aname2}</span>  {bar.evttime2}</p>
                <p>Event: {bar.aname3} at {bar.evtime3}</p>
            </Box>
        </div>
    );
}

Итогда где-нибудь в вашей функции рендеринга: 

{ this.state.selectedBar ? this.renderSelectedBar(this.state.selectedBar) : undefined }
...