Question

我已经使用图表实现了条形图。当我单击显示与条形相关的其他信息的条形时，我想在图表区域外显示一个新的div元素。我添加了一个函数，该函数将返回需要在onClick事件上显示的div元素。

<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元素吗？

Answer 1

在您遇到的情况下，您将返回该组件，但不会在任何位置渲染它。您可以做的是在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 }

Answer 2

我在谷歌上找到了这个答案。对于作者的荣誉不属于我。

   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/

如何显示新元素onClick的条形图

2 个答案: