Question

我正在使用react-heatmap-grid来创建包含数据的表，当我单击表中的矩形以打开弹出窗口时，我希望这样做。我在项目中使用了语义UI，所以我想使用仅在单击时显示的Pinned Popup。

到目前为止的代码：

const xLabels = ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'];
const yLabels =['00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00'];
const data = [[7, 1, 2, 1, 7, 3, 6],
              [7, 1, 2, 3, 4, 5, 6],
              [0, 1, 2, 3, 4, 5, 6],
              [7, 1, 2, 3, 4, 5, 6],
              [7, 1, 2, 3, 4, 5, 6],
              [0, 1, 7, 7, 4, 5, 6],
              [0, 1, 2, 7, 4, 5, 6],
              [7, 1, 2, 7, 7, 5, 6],
              [7, 1, 2, 3, 4, 7, 7],
              [0, 1, 2, 3, 4, 5, 7],
              [0, 1, 7, 0, 1, 2, 3],
              [7, 1, 2, 3, 4, 5, 6]];

                <HeatMap
                  xLabels={xLabels}
                  yLabels={yLabels}
                  xLabelWidth={60}
                  data={data}
                  squares
                  height={45}
                  width={50}
                  cellStyle={(background, value, min, max, x, y) => ({
                    background: value === 7 ? '#27414E' : '#F5F7FA',
                    fontSize: '10px',
                    color: '#444',
                    width: '14%',
                    height: '30px',
                  })}
                  cellRender={value => value && <div>{value}</div>}
                />

它工作正常，它呈现数据并将其显示在该热图表中。但是我不知道是否可以为表格中的每个正方形添加一个Popup组件。

我添加了一个aleart，当点击正方形时将其激活：

        <HeatMap
          xLabels={xLabels}
          yLabels={yLabels}
          xLabelWidth={60}
          data={this.state.tableData}
          squares
          height={45}
          width={50}
          onClick={(x, y) => alert(`Clicked ${x}, ${y}`)} //here is the onClick added
          cellStyle={(background, value, min, max, x, y) => ({
            background: value === 7 ? '#27414E' : '#F5F7FA',
            fontSize: '10px',
            color: '#444',
            width: '14%',
            height: '30px',
          })}
          cellRender={value => value && <div>{value}</div>}
        />

这是弹出窗口的结构：

<Popup
    content='show some data'
    on='click'
    pinned
    trigger={<Button content='Button' />}
  />

是否可以在Heatmap中添加它？

Answer 1

是否尝试过将其放入cellRenderer？

...
cellRender={value => <Popup
    content='show some data'
    on='click'
    pinned
    trigger={<div style={{height: 50, width: 50}} />}/>}
...

将弹出窗口添加到React Heatmap网格

1 个答案: