поддерживает отзывчивость легенды highcharts, когда другой div лежит над диаграммой

#reactjs #highcharts #sass

#reactjs #высокие диаграммы #нахальство

Вопрос:

Я хочу отобразить кнопки html в четырех углах полей полярной диаграммы HighCharts. Я смог наложить кнопки поверх div диаграммы, используя css. Однако выполнение этого приводит к тому, что элементы условных обозначений диаграммы не реагируют на щелчки мыши.

Это пример кода для одной из кнопок:

 <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>

Есть ли какой-то способ добиться этого, который не делает элементы легенды невосприимчивыми к щелчкам мыши?

Ответ №1:

Просто угадав, не видя ваш CSS-код, кнопки z-index находятся под диаграммой. Установка кнопок на более высокий z-индекс, вероятно, устранит проблему.

Ответ №2:

Решил мою проблему, установив z-индекс как для диаграмм, так и для кнопок, и поместив 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>