Question

我试图在bootstrap轮播上使用Highcarts添加图表。我只添加了两个图表并将其放在两个不同的滑块中，当我运行它时，第一张幻灯片看起来没问题但是在下一张幻灯片中，图表的宽度变小了。我尝试了其他可用的解决方法，我在here找到但没有快乐。

HTML：

<div id="chart-slider" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
   <ol class="carousel-indicators">
      <li data-target="#chart-slider" data-slide-to="0" class="active"></li>
      <li data-target="#chart-slider" data-slide-to="1"></li>
   </ol>

   <!-- Wrapper for slides -->
   <div class="carousel-inner" role="listbox">
      <div class="item active">
      <div id="chart-two" class="chart-container"></div>
   </div>

   <div class="item" class="chart-container">
       <div id="chart-three"></div>
   </div>
  </div>

Answer 1

我会尝试将图表放在简单的纯HTML文件中，然后将其嵌入Bootstrap Carousel中的iframe，例如：

<div class="carousel-inner" role="listbox">
      <div class="item active">
      <iframe src="your-chart1.html"></iframe>
      </div>
      <div class="item" class="chart-container">
      <iframe src="your-chart2.html"></iframe>
      </div>
</div>

添加到bootstrap轮播中的高亮问题问题

1 个答案: