0

我已经使用 recharts 实现了条形图。当我单击将显示与栏相关的其他信息的栏时，我想在图表区域之外显示一个新的 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 元素吗？

4

2 回答 2

0

我发现这个答案在谷歌上搜索。作者的学分不是我的。

   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/

于 2019-06-10T09:16:15.980 回答
0

在您的情况下，您将返回组件，但不会在任何地方渲染它。您可以做的是在您的 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 }
于 2018-10-11T08:55:40.820 回答