当另一个div位于图表上时，保持highcharts传奇的响应

Question

我想在HighCharts极坐标图的边缘的四个角显示html按钮。我能够使用css将按钮叠加在图表div上。但是，执行此操作会导致图表图例项无法响应鼠标单击。

这是其中一个按钮的代码示例：

<div className="pop-chart-button pop-chart-button-top pop-chart-button-left">
  <a role="button" onClick={this.showBrandQuadrantChart}>
    <img src={expandImageUrl} alt="expand" /> BRAND
  </a>
</div>

有没有办法实现这一点，不会使图例项目无法响应鼠标点击？

Answer 1

只是通过猜测而不看你的CSS代码，按钮z-index位于图表下方。将按钮设置为更高的z-index可能会解决问题。

Answer 2

通过为图表和按钮div设置z-index并将图表div放在包含按钮的div之后解决了我的问题。

以下是scss样式：

.pop-kahn-chart-container {
  position: relative;

  .pop-chart {
    z-index: 99;
  }

  .pop-chart-buttons {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    .pop-chart-button {
      font-family: 'Montserrat', sans-serif;
      font-style: normal;
      font-size: 0.86rem;
      font-weight: 600;
      position: absolute;
      z-index: 9;

      a {
        border-radius: 2px;
        padding: 2px 8px;
        color: $bp-green;
      }

      a:hover {
        background-color: $bp-gray2;
      }

      img {
        width: 19px;
        height: 19px;
        vertical-align: center;
        position: relative;
        top: -3px;
      }

      @include media-breakpoint-down(lg) {
        font-size: 0.6rem;

        img {
          width: 14.25px;
          height: 14.25px;
          top: -2.25px;
        }
      }
    }

    .pop-chart-button-top {
      top: 10%;
    }

    .pop-chart-button-bottom {
      top: 85%;
    }

    .pop-chart-button-left {
      left: 5%;
    }

    .pop-chart-button-right {
      left: 75%;
    }
  }
}

以下是使用重叠按钮呈现图表的代码：

<div className="pop-kahn-chart-container">
  <div className="pop-chart-buttons">
    <div className="pop-chart-button pop-chart-button-top pop-chart-button-left">
      <a role="button" onClick={this.showBrandQuadrantChart}>
        <img src={expandImageUrl} alt="expand" /> BRAND
      </a>
    </div>

    <div className="pop-chart-button pop-chart-button-top pop-chart-button-right">
      <a role="button" onClick={this.showExperienceQuadrantChart}>
        <img src={expandImageUrl} alt="expand" /> EXPERIENCE
      </a>
    </div>

    <div className="pop-chart-button  pop-chart-button-bottom pop-chart-button-left">
      <a role="button" onClick={this.showLowPriceQuadrantChart}>
        <img src={expandImageUrl} alt="expand" /> LOW PRICE
      </a>
    </div>

    <div className="pop-chart-button pop-chart-button-bottom pop-chart-button-right">
      <a role="button" onClick={this.showFrictionlessQuadrantChart}>
        <img src={expandImageUrl} alt="expand" /> FRICTIONLESS
      </a>
    </div>
  </div>

  <div className="pop-chart">
    <HighchartsReact highcharts={Highcharts} options={options} />
  </div>
</div>